一、需求
在ios端默认的长按文字会出现选择,可以对文字进行复制粘贴,长按图片会出现存储、拷贝、共享菜单。但是在实际开发中,有时候要避免长按时弹出选中文字,长按图片现在系统菜单,甚至会导致绑定的自定义长按事件失效。 这篇文章通过css3实现禁止ios端长按。
二、方案
(1)禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片
html,
body {
touch-callout: none;
-webkit-touch-callout: none;
}
(2)禁止ios&android用户选中文字
html,
body {
user-select: none;
-webkit-user-select: none;
}
(3)注意
- 有时候在 IOS上会出现input、textarea不能输入的情况,因此将使用-webkit-user-select:auto; 如下:
input,textarea {
-webkit-user-select:auto; /*webkit浏览器*/
margin: 0px;
padding: 0px;
outline: none;
}
- 这样就避免了苹果手机上会导致input输入框不能聚焦从而不能输人。不过不要轻易使用html body的方式,我们可以给定对应class名称。