浏览器javascript操作剪切板获得选择内容先上解决不能复制的代码,在后面讲不能复制的原因,下面的代码可以解决不让复

先上解决不能复制的代码,在后面讲不能复制的原因,下面的代码可以解决不让复制和复制会自动增加其他文字的问题

document.body.addEventListener('copy', function (e) {
	var clipboardData = e.clipboardData || window.clipboardData;
    if (window.getSelection().toString()) {
        console.log(window.getSelection().toString());
         clipboardData.setData('text/html',window.getSelection().toString());
		 clipboardData.setData('text/plain',window.getSelection().toString());
    }
});

在浏览器上面出现的东西都不安全,都能被用户获取,为什么有些网站能做到不让用户复制呢?

原因是网站的开发者设置了用户的剪贴板为空。刚知道的时候震惊了，然后去查了一下，原来网页不能直接获取剪切板的内容但是却可以设置它的内容，只要监听用户的复制操作，然后取消剪切板的默认复制行为就行了，或者把剪切板的内容设置为空,这样就能防止内容被用户抄走啦。但聪明的用户总有解决方法，比如F12打开后复制，或者DOM元素然后复制，或者截图等等。于是也有一些开发者想到了一些方法，就是内容还是可以复制，但会加上一些内容，比如CSDN和牛客等等网站，他们的做法是这样的。

1. 监听用户复制事件

2. 或者用户选中的内容

3. 增加内容到选中的内容上去

具体代码如下

document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() &&window.getSelection().toString().length > 42) {
        //超过复制的字数就会弹出并增加内容
        setClipboardText(e);
        alert('商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。');
    }
});
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();

        var htmlData = ''
            + '著作权归作者所有。&lt;br&gt;'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。&lt;br&gt;'
            + '作者：xxx;'
            + '链接：' + window.location.href + '&lt;br&gt;'
            + '来源：Anotherhome&lt;br&gt;&lt;br&gt;'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
            + '作者：xxxx\n'
            + '链接：' + window.location.href + '\n'
            + '来源：Anotherhome\n\n'
            + window.getSelection().toString();

        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}

不要使用代码去做违法或者侵犯他人的事情!

参考文章:

DIYgod的个人博客,超棒的大神

diygod.me/