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

作者 happyWang 日期 2014-08-09 Views
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