禁止页面鼠标右键和选择的方法(支持Firefox和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的方法来禁用浏览器的文本选择功能了

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

    1. user-select有两个值:
    1. none:用户不能选择文本
    1. 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的方法来禁用浏览器的文本选择功能了

自由转载-非商用-非衍生-保持署名(创意共享3.0许可证
评论