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

指定的移动端 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 网页内容指南