移动端input 无法获取焦点的问题

2019独角兽企业重金招聘Python工程师标准>>>

下午遇到一个问题，移动端的input都不能输入了，后来发现是

－webkit－user-select ：none ;

在移动端开发中，我们有时有针对性的写一些特殊的重置，比如：

＊ {-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 ；会产生一些问题。
这是webkit内核浏览器下的一个bug，具体可以参考这篇文章：https://bugs.webkit.org/show_bug.cgi?id=82692

阻止了用户的选择内容行为，会导致一些“内容可编辑”标签无法正常使用，比如input、testarea。

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

* {-webkit-user-select: text;-user-select: text;
}

另一种方式：

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

user-select , can cause issues in elements with contenteditable="true" ,so better to add that too .

所以，最好把它也加上。

最终的代码：

[contenteditable = "true"], input, textarea {-webkit-user- select: auto!important;-khtml-user-select: auto!important;-moz-user-select: auto!important;-ms-user-select: auto!important;-o-user-select: auto!important;user-select: auto!important;
}

本文内容大概就这么多，欢迎交流，欢迎反馈，如有错误，还请纠正，谢谢阅读。

附参考链接：
http://stackoverflow.com/questions/12812587/phonegap-styles-webkit-user-select-none-disabling-text-field

文／Scaukk（简书作者）
原文链接：http://www.jianshu.com/p/410866041619
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

转载于:https://my.oschina.net/songchunmin/blog/1561202

移动端input 无法获取焦点的问题相关推荐

ios端 input输入框遮挡问题解决
ios端 input输入框遮挡问题解决参考文章: (1)ios端 input输入框遮挡问题解决 (2)https://www.cnblogs.com/yhweb/p/8873239.html (3) ...
ios端input 光标问题
ios端input 光标很大,输入文字后跟随文字变小,设置input line-height即可
移动端input“输入框”常见问题及解决方法
移动端input"输入框"常见问题及解决方法参考文章: (1)移动端input"输入框"常见问题及解决方法 (2)https://www.cnblogs.co ...
css3搜索框呼出键盘,移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: 但要实现点击键盘右下角搜索,来发送请求,js代码如下( ...
html focus 唤醒手机键盘,移动端 input 元素 focus 的时候调出键盘（自动触发 focus 事件的同时调出键盘）？...
UYOU 安卓我目前没有遇到问题.然后直接使用input.focus()是无法在ios中调起键盘的,因为ios中input元素的focus必须由事件触发.此外,如果模拟了触摸事件,但是在setTime ...
vue上传录音_vue实现移动端input上传视频、音频
vue移动端input上传视频.音频,供大家参考,具体内容如下 html部分现场视频上传视频现场音频频上传音频 js部分 getVideo (ev, typer) { let taht = t ...
Unity Window触摸屏电脑和移动端Input触控，控制相机旋转缩放
Unity Window触摸屏电脑和移动端Input触控,控制相机旋转缩放原理就是获取手指滑动的偏移量,来计算代码帖出来 using UnityEngine; using System; usin ...
解决input自动获取焦点的问题
如果不想让input一开始就自动获取焦点. 解决方案:设置 tabindex="-1"即可 <input type="submit" name=" ...
在 mousedown 事件中让 input 标签获取焦点的问题
问题我们先来看如下的代码: <body><button id="button">点击</button><div class=" ...

移动端input 无法获取焦点的问题

移动端input 无法获取焦点的问题相关推荐

最新文章

热门文章