美文网首页前端之路Web前端之路让前端飞
如何用css和js禁止网页选择文字(兼容) 保护版权呢?(附代码

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

作者: 双愚 | 来源:发表于2017-11-14 23:40 被阅读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有两个值:

    • 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属性
    //IE6-9
    document.body.onselectstart = document.body.ondrag = function(){
    return false;
    }
    

    附GitHub代码


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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/fgdqvxtx.html