解决 input 输入框在 iOS 系统中无法输入内容
Posted 明天也要努力
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决 input 输入框在 iOS 系统中无法输入内容相关的知识,希望对你有一定的参考价值。
问题
input 输入框在 android 系统可以输入和点击,但是在 ios 系统上 input 输入框无法点击和输入。
解决
去掉下列样式
-webkit-touch-callout:none;
-webkit-user-select:none;
或者这样写
*:not(input, textarea)
-webkit-touch-callout: none;
-webkit-user-select: none;
拓展
关于 user-select 属性
定义和用法
user-select 属性规定是否能选取元素的文本。
在 web 浏览器中,如果您在文本上双击,文本会被选取或高亮显示。此属性用于阻止这种行为。
语法
user-select: auto|none|text|all;
属性值
值 | 描述 |
---|---|
auto | 默认。如果浏览器允许,则可以选择文本。 |
none | 防止文本选取。 |
text | 文本可被用户选取。 |
all | 单击选取文本,而不是双击。 |
关于 -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尚不明确
以上是关于解决 input 输入框在 iOS 系统中无法输入内容的主要内容,如果未能解决你的问题,请参考以下文章
微信公众号弹出框在IOS最新系统中点击键盘上的“完成”导致事件无法触发问题