解决 input 输入框在 iOS 系统中无法输入内容

问题

input 输入框在 Android 系统可以输入和点击，但是在 iOS 系统上 input 输入框无法点击和输入。

解决方法

方案一：在代码中查找并去掉下列样式

-webkit-touch-callout:none;
-webkit-user-select:none;

方案二：使用 not 选择器匹配不是 input, textarea 标签的每个元素

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

拓展知识

关于 user-select 属性

定义和用法
user-select 属性规定是否能选取元素的文本。
在 web 浏览器中，如果您在文本上双击，文本会被选取或高亮显示。此属性用于阻止这种行为。

语法

user-select: auto|none|text|all;

JavaScript 语法：

object.style.userSelect="none"

属性值

值	描述
auto	默认。如果浏览器允许，则可以选择文本。
none	防止文本选取。
text	文本可被用户选取。
all	单击选取文本，而不是双击。

兼容性：
表格中的数字注明了完全支持该属性的首个浏览器版本。
跟随 -webkit-、-ms- 或 -moz- 的数字规定使用前缀的首个版本。

属性	chrome	IE	Firefox	Safari	opera
user-select	54.06.0 -webkit-	79.010.0 -ms-	69.02.0 -moz-	3.1 -webkit-	41.015.0 -webkit-

关于 -webkit-touch-callout 属性

注意：该特性是非标准的，请尽量不要在生产环境中使用它！
概述：-webkit-touch-callout 这个CSS 属性禁用了默认的callout展示， callout 是指当触摸并按住一个元素的时候出现的提示。
当在iOS上一直按住一个目标元素时，Safari会展示一个关于这个链接的callout信息。webkit-touch-callout 属性允许禁用掉这一行为。

语法：

-webkit-touch-callout: default   /* 显示标注 */
-webkit-touch-callout: none      /* 禁用标注 */

-webkit-touch-callout: initial
-webkit-touch-callout: inherit
-webkit-touch-callout: unset

示例：

.example {
  -webkit-touch-callout: none;
}

兼容性：
不是任何规范的一部分。
iOS 2.0及更高版本的Safari浏览器可用
Android尚不明确