CSS禁止选择

有时候，我们为了用户体验，需要禁用选择文本功能。这需要用到一个CSS属性：user-select，user-select的文档点这里

user-select有两个值：

none：用户不能选择文本

text：用户可以选择文本

需要注意的是：user-select并不是一个W3C的CSS标准属性，浏览器支持的不完整，需要对每种浏览器进行调整

1 body{
2    -webkit-touch-callout: none;
3    -moz-user-select: none; /*火狐*/
4    -webkit-user-select: none;  /*webkit浏览器*/
5    -ms-user-select: none;   /*IE10*/
6    -khtml-user-select: none; /*早期浏览器*/
7    user-select: none;
8 }

 

IE6-9还没发现相关的CSS属性，只能通过JS来实现

1 //IE6-9
2 document.body.onselectstart = document.body.ondrag = function(){
3     return false;
4 }

 

这样我们就可以结合CSS和JS的方法来禁用浏览器的文本选择功能了

 

posted @ 2020-10-15 14:13  殇琉璃  阅读(712)  评论(0)  编辑  收藏  举报