webkit浏览器下user-select:none导致input框无法访问

前言

大家可以先看一下我之前的一篇文章：给移动端webkit内核浏览器的样式预设，是的，我就在公司的网站上用了那一段样式，然后，网站的搜索就无法使用…..

关于bug

这是webkit内核浏览器下的一个bug，具体情况可以参见这篇文章：https://bugs.webkit.org/show_bug.cgi?id=82692

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

解决方式

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

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

如果需要这种功能，有如下几种方法： 继续使用之前文章里面的那种样式写法，但是要加一句

input {
-webkit-user-select: none!important;
-user-select: none!important;
}

另一种方法，重写之前文章里面写的样式

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

最终华丽版,保留我之前的样式，添加下面的

[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

---

• ← Previous Post
• Next Post →

---

---

相关推荐

• 给移动端webkit内核浏览器的样式预设

---