移动端input 无法获取焦点的问题
2016-10-18 10:37
501 查看
下午遇到一个问题,移动端的input都不能输入了,后来发现是
-webkit-user-select :none ;
在移动端开发中,我们有时有针对性的写一些特殊的重置,比如:
其中,-webkit-user-select :none ;会产生一些问题。
这是webkit内核浏览器下的一个bug,具体可以参考这篇文章:https://bugs.webkit.org/show_bug.cgi?id=82692
![](http://upload-images.jianshu.io/upload_images/1806083-eb909f4b1b0e8e66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
阻止了用户的选择内容行为,会导致一些“内容可编辑”标签无法正常使用,比如input、testarea。
如果网站不需要阻止用户的选择内容的行为就可以使用如下样式:
另一种方式:
user-select , can cause issues in elements with contenteditable="true" ,so better to add that too .
所以,最好把它也加上。
最终的代码:
本文内容大概就这么多,欢迎交流,欢迎反馈,如有错误,还请纠正,谢谢阅读。
附参考链接:
http://stackoverflow.com/questions/12812587/phonegap-styles-webkit-user-select-none-disabling-text-field
文/Scaukk(简书作者)
原文链接:http://www.jianshu.com/p/410866041619
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
-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
![](http://upload-images.jianshu.io/upload_images/1806083-eb909f4b1b0e8e66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
阻止了用户的选择内容行为,会导致一些“内容可编辑”标签无法正常使用,比如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
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
相关文章推荐
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 火狐下input焦点无法重复获取问题的解决方法
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 移动端fixed和input获取焦点软键盘弹出影响定位的问题
- 五八、移动端input、textarea无法获取焦点
- 火狐下input焦点无法重复获取问题的解决方法
- DataGrid的TextInput无法获取焦点问题
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 解决基于SlidingMenu的fragment切换后edittext无法获取焦点的问题
- .net 2.0 中对于非服务器端的input元素 type为file后台无法获取的问题的解决方法
- Winform组合框ComboBox无法获取输入焦点问题
- android webview input控件获取焦点放大的问题
- ListView的item中含edittext时无法获取焦点的问题
- Android疑惑篇------------含有button按钮的ListView中,列表项无法获取焦点的问题
- ligerUI调用$.ligerDialog.open弹出窗口,关闭后无法获取焦点问题
- bootstrap模态框modal和select2合用时input无法获取焦点
- input autofocus focus() 在iphone上无效,无法在手机上默认获取焦点
- input实时监控和获取焦点的问题,oninput,ononfocus
- ListView条目中按钮或条目无法获取焦点问题
- 关于使用input type=file 标签上传文件的注意细节(上传文件 无法获取文件 问题)