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

各种针对webkit内核浏览器下user-select:none导致的input框无法正常使用的bug的各种解决方案

前言

大家可以先看一下我之前的一篇文章:给移动端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

各种刷新页面的方法

详细列举了几种刷新页面的方式,解析其中的原理和推荐的方式

很多时候,我们因为一些原因,要对页面进行刷新,这个时候,可以使用的方法有很多



location.reload();

location.href = location.href;

window.location = location;

location.replace( location.href );

location.go(0);


关于浏览器缓存和服务器获取

用户浏览网页的时候,在当前标签页内进行各种页面跳转的时候,浏览器会缓存浏览过的页面。

在进行页面跳转的时候,有两种方式:

一种是在历史记录内进行跳转,这种跳转会由浏览器读取缓存的页面数据进行展示。

还有一种是跳出历史的跳转,直接指向路径的url,这种跳转是会从服务器获取数据展示的。

如何查看是否读取的缓存

以chrome的开发者工具为例,打开之后,查看network面板,清空当前的网络请求列表。

在console里面执行相应的方法,然后查看当前页面的请求(也就是xxx.html),

如果size/content列下显示的是from cache就表明是读的缓存(进行这个实验的时候应该关闭开发者工具里面的禁止缓存选项)

各种跳转的详细情况

location.reload

这个方法有个Boolean值的参数,为true的时候,则刷新就始终是从服务器获取最新的数据。

如果不设定或者设定为false的时候,则是从浏览器的缓存里面获取数据

chrome里面reload的默认参数似乎是true,也就是说会从服务器端获取

所以使用reload的时候,最好明确添加reload的参数

参考地址:https://developer.mozilla.org/en-US/docs/Web/API/Location.reload

location.href = location.href

把location.href指向当前页地址就会触发重新刷新页面。

不过这种方法不太稳定,在chrome和firefox下面,第一次执行的时候会从服务器端载入当前页面,之后再次执行的时候就从浏览器缓存读取,所以最好不要轻易使用

window.location = window.location

window.location的赋值会导致页面的重载把window.location赋值给window.location,使得重载的页面再次指向当前页面,也就变相的实现了刷新页面。

这种方式就目前测试读取的是浏览器缓存里面的内容

location.replace

location.replace会用指定的url里面的内容替换当前页的内容,这个会导致用户无法后退回到之前的页面,回到的是之前页面的前一个历史。

chrome下会始终从缓存中读取。

firefox下,第一次从服务器获取,之后从缓存中读取。

参考地址:https://developer.mozilla.org/en-US/docs/Web/API/Location.replace

history.go(0)

history.go是会跳转向对应的历史,所以很明显是一定会从缓存中读取的。

使用参数0,表示的是跳转的历史就是当前页,也就实现了刷新页面。

参考地址:http://www.w3schools.com/jsref/met_his_go.asp

总结

综上,在刷新页面的时候,如果需要考虑从服务器获取还是读取缓存,比较靠谱的是location.reload()和history.go(0)

参考地址:

http://hi.baidu.com/winterhome/item/73c26920b3faa10a76272c97

http://stackoverflow.com/questions/1536900/force-a-page-refresh-using-javascript-in-firefox