IOS系统中微信/浏览器 手机端输入框input无法输入

最近两天做移动端活动页面时,遇到一个问题:IOS系统中,微信移动端的input都不能输入了,本地环境和安卓手机都是没问题的。

这就尴尬了,然后网上搜了一下,有人说可能是user-select导致的,我检查了一下自己的less,果然有相关的重置代码。

那么为什么要加下面这句呢?

input, textarea { -webkit-user-select: none; }

其实是用来禁止用户进行复制选择的。

这是webkit内核浏览器下的一个bug,具体可以参考这篇文章:(https://bugs.webkit.org/show_bug.cgi?id=82692)
阻止了用户的选择内容行为,会导致一些“内容可编辑”标签无法正常使用,比如input、textarea。
如何解决?

如果有禁止用户选择内容复制的需求,那么你可以用css not排除掉input和textarea标签,如果没有该需求,用下面代码覆盖就可以啦:

[contenteditable="true"], input, textarea {
    -webkit-user-select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
}

猜你喜欢

转载自blog.csdn.net/weixin_33836874/article/details/91006535