玩掘金、知乎的时候复制一段文字是怎么做的？

　　玩掘金、知乎的时候复制一段文字是怎么做的？

　　前言

　　有时候我们经常会遇到这样的场景：玩掘金的时候知乎复制一段文字，总是在内容后面加上一些版权信息，禁止选择网站这样的小说。此功能禁止复制，有点击自动复制账号的功能。

　　我经常遇到这些场景。有时候想想以后怎么做。趁着周末的空闲时间研究了一下，发现这些都和操作剪贴板有关，不难理解。基本知道怎么做，整理，分享给大家。

　　了解个人博客：

　　内容：API介绍：复制、剪切、粘贴事件：复制操作发生时触发复制；剪切操作发生时触发剪切；粘贴操作发生时触发粘贴；每个事件都有一个before事件对应：beforecopy, beforecut, beforepaste;

　　之前的这些一般都不是很有用，所以我们可以专注于其他三个事件。

　　触发条件：

　　鼠标右键菜单的复制、粘贴、剪切；使用对应的键盘组合，如：command+c、command+v；即使随便按下，也会触发事件。在 Chorme、Firefox 和 Safari 中，这些 before 事件只会在剪贴板事件实际发生时触发。在IE上，可以先触发。实际测试的时候，最新版本的chorme也会被随机按下触发，所以限制应该是老版本。

　　所以我想说的是：之前这些事件最好不要用，剪贴板的处理最好放在复制、剪切和粘贴上。

　　使用姿势：

　　以文案为例：

　　 document.body.oncopy = e => {

// *敏*感*词*全局复制 做点什么

}

// 还有这种写法：

document.addEventListener("copy", e => {

// *敏*感*词*全局复制 做点什么

});

　　以上是对document.body的全局监控，但是很多人不知道的是，我们还可以为一些dom单独添加剪贴板事件：

　　 // html结构

// 写法一样：

let test1 = document.querySelector('#test1');

test1.oncopy = e => {

// *敏*感*词*test1发生的复制事件 做点什么

// test1发生的复制事件会触发回调，其他地方不会触发回调

}

　　其他活动相同，这里不再赘述。

　　clipboardData 对象：用于访问和修改剪贴板中的数据

　　兼容：

　　不同的浏览器有不同的对象：在IE中，这个对象是window对象的属性，而在Chrome、Safari和Firefox中，这个对象是对应事件对象的属性。所以我们在使用的时候，需要做如下兼容：

　　 document.body.oncopy = e => {

let clipboardData = (e.clipboardData || window.clipboardData);

// 获取clipboardData对象 + do something

}

　　对象方法：

　　对象有三个方法：getData()、setData()、clearData()

　　应用：

　　如果学习不是为了安装X，那么一切都将毫无意义。看看这个东西可以用在哪些场景：

　　实*敏*感*词*复制一大段文字添加版权信息：

　　实现很简单：取消默认复制后，主要是在复制内容后添加信息，然后根据clipboardData的setData()方法将信息写入剪贴板。

　　你可以直接复制这段代码在本地试试。

　　 // 掘金这里不是全局*敏*感*词*，应该只是*敏*感*词*文章的dom范围内。

document.body.oncopy = event => {

event.preventDefault(); // 取消默认的复制事件

let textFont, copyFont = window.getSelection(0).toString(); // 被复制的文字 等下插入

// 防知乎掘金 复制一两个字则不添加版权信息 超过一定长度的文字 就添加版权信息

if (copyFont.length > 10) {

textFont = copyFont + '\n'

+ '作者：OBKoro1\n'

+ '链接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts\n'

+ '来源：掘金\n'

+ '著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。';

} else {

textFont = copyFont; // 没超过十个字 则采用被复制的内容。

}

if (event.clipboardData) {

return event.clipboardData.setData('text', textFont); // 将信息写入粘贴板

} else {

// 兼容IE

return window.clipboardData.setData("text", textFont);

}

}

　　然后command+c，command+v，输出：

　　你复制的内容

作者：OBKoro1

链接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

　　实现起点网的防复制功能：

　　可以复制代码到本地播放：

　　 // 禁止右键菜单

document.body.oncontextmenu = e => {

console.log(e, '右键');

return false;

// e.preventDefault();

};

// 禁止文字选择。

document.body.onselectstart = e => {

console.log(e, '文字选择');

return false;

// e.preventDefault();

};

// 禁止复制

document.body.oncopy = e => {

console.log(e, 'copy');

return false;

// e.preventDefault();

}

// 禁止剪切

document.body.oncut = e => {

console.log(e, 'cut');

return false;

// e.preventDefault();

};

// 禁止粘贴

document.body.onpaste = e => {

console.log(e, 'paste');

return false;

// e.preventDefault();

};

// css 禁止文本选择 这样不会触发js

body {

user-select: none;

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

}

　　附注：

　　破解防止复制：

　　上面的防拷贝方法是通过js+css实现的，所以思路是：禁用js+取消用户选择样式。

　　Chrome浏览器：打开浏览器控制台，按F1进入设置，勾选Disable JavaScript (js forbidden)。

　　

　　这时候如果还是不能复制，就得找到用户选择的样式，取消这个样式。

　　

　　所以我真的看不懂那些盗版小说，打扰一下？ ? ?

　　点击复制功能：

　　不能使用剪贴板数据：

　　在IE中可以通过window.clipboardData.setData('text','content')实现。

　　如上所述，clipboardData 是 IE 中 window 的一个属性。

　　其他浏览器是对应事件对象的属性。这实际上是一种防止未经授权访问的安全措施。为了兼容其他浏览器，我们不能通过clipboardData来实现这个操作。

　　具体方法：

　　点此复制演示内容，点入查看。

　　结论

　　在工作之外学习这些东西很有趣，也可以拓宽你的知识面。

　　其实只要监控到这些事件，我们就可以对要剪切的内容进行各种操作，比如：复制时改变文字，粘贴时搜索图片（上传图片）或文字。剪裁的长度等等，你的唯一限制

　　希望看完的朋友可以点赞/关注。您的支持是对我最大的鼓励。

　　个人博客和掘金个人主页，如需转载请放原文链接并签名。码字不易，感谢支持！

　　如果喜欢本文，欢迎关注我的订阅号，技术之路漫漫，期待未来共同学习成长。

　　

　　2018.8.8 以上

　　参考资料：

　　js 高度 14.2.2 操作剪贴板

　　如何禁止在网页上复制粘贴以及如何破解

　　原生js实现点击按钮复制文字