CSS禁止选择文本功能（兼容IE,火狐等浏览器）

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

有时候，我们为了用户体验，需要禁用选择文本功能。这需要用到一个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的方法来禁用浏览器的文本选择功能了

附：另

[HTML] 纯文本查看 复制代码

<!--不选中就是让光标不能被点中，所以只要设置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>

		自动登录	找回密码
密码			立即加入

CSS禁止选择文本功能（兼容IE,火狐等浏览器）

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老