如何禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片、禁止ios&android用户选中文字

一、需求

在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名称。

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×