解决 input 输入框在 iOS 系统中无法输入内容_明天也要努力_input苹果手机输入不了

网络投稿 02-07 1337

问题

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- 的数字规定使用前缀的首个版本。

属性chromeIEFirefoxSafarioperauser-select54.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尚不明确