移动端input 无法获取焦点的问题
下午遇到一个问题,移动端的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;
}
本文内容大概就这么多,欢迎交流,欢迎反馈,如有错误,还请纠正,谢谢阅读。
移动端input 无法获取焦点的问题的更多相关文章
- [移动端WEB] 移动端input标签按钮为什么在苹果手机上还有一层白色?
移动端input标签按钮为什么在苹果手机上还有一层白色? 解决办法:其实蛮简单的,就加一个属性就好了 input { outline:0px ; -webkit-appearance: none; } ...
- bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转
bootStrap模态框与select2合用时input不能获取焦点 在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 把 ...
- 移动端input输入框把页面顶起, 收起键盘页面复原不了问题
我相信大家平时也会遇到这种问题, 移动端 input 或者 textarea获取光标, 整个页面被顶起来, 键盘收起, 页面不复原的问题 ====>>>> 我这边提供两种解决 ...
- 移动端 input 获取焦点后弹出带enter(类似于搜索,确定,前往)键盘,以及隐藏系统键盘
一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是 ...
- 移动端input“输入框”常见问题及解决方法
转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...
- web移动端input获得光标Fixed定位失效解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...
- 【转】移动端input输入placeholder垂直不居中
在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height.但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是 ...
- 小程序input输入框获取焦点时,文字会出现闪动
最近在开发小程序时,发现一个有趣的现象.input里面设置了placeholder,随后当输入框获取焦点时,文字会出现一瞬间的抖动,随后正常. 猜想可能是设置的font-family不同引起的抖动,但 ...
- ios、移动端 input type=date无法点击的问题解决方法
正常用input type = "text",获取焦点的时候,将type 改成 date即可. <div class="form-item"> &l ...
随机推荐
- 虚拟机安装centos6.6全步骤
1.首先要下载一个centos的iso镜像,我是用虚拟机VMware来安装的,用VMware最好创建一个空白硬盘. 2.创建完毕再设置里面挂载iso的centos系统文件. 3.进入到这个页面: 说明 ...
- C# DataTable使用方法详解--删除表数据
在项目中常常常使用到DataTable,假设DataTable使用得当,不仅能使程序简洁有用,并且可以提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 1.添加引用 1 u ...
- 一个困扰了我N久的bug , android.enableAapt2=false 无效
Error:java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception: AAPT error: c ...
- 一个关于EasyUI超恶心的BUG。。。Cannot read property 'options' of undefined
控制台Console抛出的异常: jquery.easyui.min.js:9148 Uncaught TypeError: Cannot read property 'options' of und ...
- Structs复习 Structs标签
如果类型是object Structs会把它默认解析为OGNL表达式 想取字符串的话就 ‘’ ‘ ’ ‘’ jar包 web.xml. <?xml version="1.0" ...
- 吴裕雄 oracle 管理数据表对象
- tensorflow中run和eval的区别(转)
在tensorflow中,eval和run都是获取当前结点的值的一种方式. 在使用eval时,若有一个 t 是Tensor对象,调用t.eval()相当于调用sess.run(t) 一下两段代码等效: ...
- java网页技术
About jQuery Getting started with jQuery can be easy or challenging, depending on your experience wi ...
- opencv 学习笔记
Opencv 笔记 路径问题: 路径输入:Opencv载Qt中不能出现汉字,路径也不能出现汉字在vs中可以出现. (”D:/QTopencv/.1jpg”)=(”D:\\QTopencv\\.1jpg ...
- MySql数据库常用语句汇总
第一天1.登陆数据库 mysql -uroot -proot; //-u用户名 -p密码2.启动数据库 net start mysql;3.创建表空间(数据库)create database qy97 ...