解决 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 系统中无法输入内容的主要内容,如果未能解决你的问题,请参考以下文章

input框在ios和android的适配问题

input输入框在IOS手机上偏移问题

微信公众号弹出框在IOS最新系统中点击键盘上的“完成”导致事件无法触发问题

vue页面中存在大量数据时,input输入搜索框在输入时卡动问题解决

select下拉框、输入框在IOS中出现阴影

mui的input框在IOS系统下无法聚焦或点击多次才能聚焦