问题
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尚不明确