下午遇到一个问题,移动端的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

移动端input 无法获取焦点的问题的更多相关文章

  1. [移动端WEB] 移动端input标签按钮为什么在苹果手机上还有一层白色?

    移动端input标签按钮为什么在苹果手机上还有一层白色? 解决办法:其实蛮简单的,就加一个属性就好了 input { outline:0px ; -webkit-appearance: none; } ...

  2. bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转

    bootStrap模态框与select2合用时input不能获取焦点 在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 把 ...

  3. 移动端input输入框把页面顶起, 收起键盘页面复原不了问题

    我相信大家平时也会遇到这种问题, 移动端 input 或者 textarea获取光标, 整个页面被顶起来, 键盘收起, 页面不复原的问题 ====>>>>  我这边提供两种解决 ...

  4. 移动端 input 获取焦点后弹出带enter(类似于搜索,确定,前往)键盘,以及隐藏系统键盘

    一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是 ...

  5. 移动端input“输入框”常见问题及解决方法

    转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...

  6. web移动端input获得光标Fixed定位失效解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...

  7. 【转】移动端input输入placeholder垂直不居中

    在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height.但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是 ...

  8. 小程序input输入框获取焦点时,文字会出现闪动

    最近在开发小程序时,发现一个有趣的现象.input里面设置了placeholder,随后当输入框获取焦点时,文字会出现一瞬间的抖动,随后正常. 猜想可能是设置的font-family不同引起的抖动,但 ...

  9. ios、移动端 input type=date无法点击的问题解决方法

    正常用input type = "text",获取焦点的时候,将type 改成 date即可. <div class="form-item"> &l ...

随机推荐

  1. 虚拟机安装centos6.6全步骤

    1.首先要下载一个centos的iso镜像,我是用虚拟机VMware来安装的,用VMware最好创建一个空白硬盘. 2.创建完毕再设置里面挂载iso的centos系统文件. 3.进入到这个页面: 说明 ...

  2. C# DataTable使用方法详解--删除表数据

    在项目中常常常使用到DataTable,假设DataTable使用得当,不仅能使程序简洁有用,并且可以提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 1.添加引用 1 u ...

  3. 一个困扰了我N久的bug , android.enableAapt2=false 无效

    Error:java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception: AAPT error: c ...

  4. 一个关于EasyUI超恶心的BUG。。。Cannot read property 'options' of undefined

    控制台Console抛出的异常: jquery.easyui.min.js:9148 Uncaught TypeError: Cannot read property 'options' of und ...

  5. Structs复习 Structs标签

    如果类型是object Structs会把它默认解析为OGNL表达式 想取字符串的话就 ‘’ ‘ ’ ‘’ jar包 web.xml. <?xml version="1.0" ...

  6. 吴裕雄 oracle 管理数据表对象

  7. tensorflow中run和eval的区别(转)

    在tensorflow中,eval和run都是获取当前结点的值的一种方式. 在使用eval时,若有一个 t 是Tensor对象,调用t.eval()相当于调用sess.run(t) 一下两段代码等效: ...

  8. java网页技术

    About jQuery Getting started with jQuery can be easy or challenging, depending on your experience wi ...

  9. opencv 学习笔记

    Opencv 笔记 路径问题: 路径输入:Opencv载Qt中不能出现汉字,路径也不能出现汉字在vs中可以出现. (”D:/QTopencv/.1jpg”)=(”D:\\QTopencv\\.1jpg ...

  10. MySql数据库常用语句汇总

    第一天1.登陆数据库 mysql -uroot -proot; //-u用户名 -p密码2.启动数据库 net start mysql;3.创建表空间(数据库)create database qy97 ...