JeeStudy 发表于 2017-8-15 14:54:35

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]
查看完整版本: CSS禁止选择文本功能(兼容IE,火狐等浏览器)