移动端ios系统中表单标签无法获取焦点

做移动端网页的时候发现在ios系统中表单组件无法获取焦点,无法输入

 

-webkit - touch - callout: none;
//-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为

//禁用Webkit内核浏览器的文字大小调整功能。

-webkit-text-size-adjust: none;

//避免点击a标签或者注册了click事件的元素时产生高亮

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

//禁止用户进行复制.选择.

-webkit-user-select: none;

在使用-webkit-user-select :none ;会产生一些问题阻止了用户的选择内容行为,会导致一些“内容可编辑”标签无法正常使用,比如input、testarea。

如果网站不需要阻止用户的选择内容的行为就可以使用如下样式:

-webkit-user-select: text;
-user-select: text;

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

}

解决办法就是在给input 或textarea加一个属性

input {
    -webkit-user-select: auto !important;
}
posted @ 2020-12-08 17:26  飓风~~  阅读(212)  评论(0编辑  收藏  举报