CSS禁止选择文本功能(兼容IE,火狐等浏览器)
有时候,我们为了用户体验,需要禁用选择文本功能。这需要用到一个CSS属性:user-select,user-select的文档点这里user-select有两个值:
none:用户不能选择文本
text:用户可以选择文本
需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
IE6-9还没发现相关的CSS属性,只能通过JS来实现
//IE6-9
document.body.onselectstart = document.body.ondrag = function(){
return false;
}
这样我们就可以结合CSS和JS的方法来禁用浏览器的文本选择功能了
附:另
<!--不选中就是让光标不能被点中,所以只要设置cursor一直为default的样式就行了-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
.no_select{
-webkit-user-select: none;/* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
cursor: default;
}
</style>
</head>
<body>
<div class="no_select">hello world!</div>
</body>
</html>
页:
[1]