CSS禁止选择

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

user-select有两个值:

none:用户不能选择文本

text:用户可以选择文本

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

body{
   -webkit-touch-callout: none;
   -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的方法来禁用浏览器的文本选择功能了

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原文链接:CSS禁止选择 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/css-user-select.html)

发表评论

请登录后发表评论: