移动端-webkit-user-select:none导致input/textarea输入框无法输入

时间：2022-11-12 16:55:00

这个问题，也算是个大坑了。

最开始的开始，是因为我们在做大装盘活动的时候，发现在ios上面出现了这样的问题：点击“转”按钮，ios上面会有延迟并且会出现图片的阴影，这个肯定就不好看了撒，然后，找吧，改吧。

 

对于延迟问题，使用以下方法解决：

FastClick消除点击延时提高程序的运行效率
引入插件的javascript文件到你的HTML网页中，像这样：
<script type='application/javascript' src='fastclick.js'></script>
 
注意：type属性在HTML5网页中可以省略不写。
脚本必须加载到实例化fastclick在页面的任何元素之前。
实例化 fastclick 最好在body元素的前面
 
$(function(){
//fastclick用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300s延迟
FastClick.attach(document.body);
});

附加： 解决移动端点透问题方法：

　　1. 众所周知，zepto的tap事件是有点透问题的，但是最新版的zepto已经修复了这个问题。

　　2. 在zepto修复问题之前，有fastclick、hammer等通用库可以使用。

　　其中最常使用的还是fastclick，地址 ：https://github.com/ftlabs/fastclick

对于点透问题，参考这位同学写的博客，写的很好：web移动前端的click点透问题

图片阴影的问题，找了好久，终于找到了解决办法：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    // 后面的几行是新加的
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    outline: none;
}

好啦，大功告成。结果第二天来上班，又出现了问题，说的是所有的input框在ios上面都无法输入了，这个时候，我慌了。仔细回想，头天代码都没动，只是改了这个，好吧，又开始网上各种查各种找。

终于找到原因啦。。。。

就是-webkit-user-select: none;导致的！！！

经过查阅，网上有提供一种好的解决办法：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

*:not(input,textarea) { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
}

最终完美解决了这个问题。后来查阅了一下，新加的几行代码的意思：

-webkit-tap-highlight-color
这是一个 不规范的属性（ unsupported WebKit property），它没有出现在 CSS 规范草案中。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。
 
-webkit-touch-callout
当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
 
user-select
(1) 语法
user-select:none | text | all | element
默认值：text
适用范围：除替换元素外的所有元素
(2) 取值说明
none:文本不能被选择
text:可以选择文本
all：当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素，那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。
Element:可以选择文本，但选择范围受元素边界的约束
 

 

标签：

相关文章