h5通过css实现禁止ios端长按复制选中文字的方法

Posted 2020-12-16 前端一点红

在ios端默认的长按选择，可以对文字进行复制粘贴。但是在实际开发中，针对一些按钮一般要避免长按时弹出选中文字，或者一些罩层要避免弹出。 这篇文章通过css3实现禁止ios端长按复制选中文字的方法。

 

css代码如下：

*{
-webkit-touch-callout:none; /*系统默认菜单被禁用*/
-webkit-user-select:none; /*webkit浏览器*/
-khtml-user-select:none; /*早期浏览器*/
-moz-user-select:none;/*火狐*/
-ms-user-select:none; /*IE10*/
user-select:none;
}

　　

Pexelshttps://www.wode007.com/sites/73241.html 天堂图片网https://www.wode007.com/sites/73243.html

但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:auto;如下：

input,textarea {
    -webkit-user-select:auto; /*webkit浏览器*/
    margin: 0px;
    padding: 0px;
    outline: none;
}

　　

这样就避免了苹果手机上会导致input输入框不能聚焦从而不能输。当然一般不要轻易使用通配符*{}的方式，我们可以给定对应class名称。