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