JEE Study|JAVA EE|企业级开发学习网

标题: CSS禁止选择文本功能（兼容IE,火狐等浏览器） [打印本页]
作者: JeeStudy    时间: 2017-8-15 14:54
标题: 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的方法来禁用浏览器的文本选择功能了

附：另
[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>












欢迎光临 JEE Study|JAVA EE|企业级开发学习网 (http://www.jeestudy.com/) Powered by Discuz! X3.2