css禁止选择文本(兼容IE,firefox)的实现方法

发布时间:2020-07-09编辑:脚本学堂
有时为了用户体验,需要禁用选择文本功能,如何实现呢?请参考下本文介绍的方法吧。

实现此功能,需要用到一个CSS属性: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的方法禁用浏览器的文本选择功能。