前端之路Web前端之路让前端飞

如何用css和js禁止网页选择文字(兼容) 保护版权呢?(附代码

2017-11-14  本文已影响31人  双愚

现在有好多人为了省事直接复制他人的文章,从而损害到别人的利益,那么如何从技术上保护呢?

问: 前端开发css禁止选中文本如何禁止选中文字???

禁止选中的方法很简单,有两种方法:JS和CSS两种

js方法(onselectstart="return false;)

直接干货

if(document.all){
    document.onselectstart= function(){return false;}; //for ie
}else{
    document.onmousedown= function(){return false;};
    document.onmouseup= function(){return true;};
}
document.onselectstart = new Function('event.returnValue=false;');
 
//劫持开始选择事件和(或)鼠标按下、抬起事件。

简单方法,可以直接在标签里添加
onselectstart="return false;
例子如下:

<div onselectstart="return false">  
    adasdasdasdasdasdasdad  
</div>  

css方法(user-select)

user-select有两个值:

需要注意的是: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属性
//IE6-9
document.body.onselectstart = document.body.ondrag = function(){
return false;
}

附GitHub代码


好看的人儿,点个喜欢❤ 你会更好看哦~~

上一篇下一篇

猜你喜欢

热点阅读