IOS系统中微信、浏览器、手机端输入框input无法输入_微信浏览器输入框input不显示

问题描述

APP内嵌H5、浏览器，在弹窗中的input框无法输入，最多只能输入一个字，并且无光标。

开始以为是input上的事件（focus、blur）出现问题，删除所有事件及属性以后还是无法输入。

问题原因

项目中global.less文件中定义了user-select：

#root {
	...
  user-select: none;
}
1
2
3
4

然后紧接着又定义了:

#root input {
  user-select: auto;
}
1
2
3

但是只有在部分情况下可以生效，使用antd-mobile的Modal弹窗中无法生效。

该属性是用来禁止用户进行复制选择的，这是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;
}
1
2
3
4
5
6
7
8

写到这里主要是复习下CSS选择器的知识：

属性选择器

按照给定的属性，选择所有匹配的元素。

语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

例子：[autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。

选择器列表

, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。

语法：A, B

示例：div, span 会同时匹配 <span> 元素和 <div> 元素。

参考文章

IOS系统中微信/浏览器 手机端输入框input无法输入 - 简书 (jianshu.com)