移动端H5页面禁止长按复制及去掉点击高亮

发表于 更新于 分类于 阅读次数： 本文字数： 619 阅读时长 ≈ 1 分钟

指定的移动端 H5 页面，长按文字拉起复制面板，对用户体验不友好。活动 H5 页面点击区域闪现高亮。

image-20220606211508208

解决

禁止长按复制

1
2
3
4
5
6
7
8
9
10
11
12
13
* {
  -webkit-user-select: none; /* webkit浏览器 */
  -webkit-touch-callout: none; /* 系统默认菜单被禁用 */
  -khtml-user-select: none; /* 早期浏览器 */
  -moz-user-select: none; /* 火狐 */
  -ms-user-select: none; /* IE10 */
  user-select: none;
}
input,
textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

去掉点击高亮

默认情况下，当用户点击链接或 JavaScript 可点击元素时，iOS 上的 Safari 会以透明灰色突出显示该区域。使用-webkit-tap-highlight-colorCSS 属性，您可以修改或禁用网页上的此默认行为。

1
2
3
4
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}

相关链接

[1] -webkit-tap-highlight-color

[2] Safari 网页内容指南