有时候我们经常会碰到这些场景：玩掘金、知乎的时候复制一段文字，总是会在内容后面加上一些版权信息，以及像小说网站等都有禁止选中，禁止复制这种功能，还有点击自动复制账号的功能。
我也经常遇到这些场景，有时候会去想这后面到底是怎么做，周末趁着有空去研究了一下，然后发现这些都跟操作剪贴板有关系，并且都不难，了解一下基本都知道怎么做了，整理分享一波给大家。
个人博客了解一下：obkoro1.com
- API介绍
- 实现类知乎/掘金复制大段文本添加版权信息
- 实现类起点网的防复制功能
- 破解防复制
- 点击复制功能
- 发生复制操作时触发;
- 发生剪切操作时触发;
- 发生粘贴操作时触发;
- 每个事件都有一个before事件对应：、、;
这几个before一般不怎么用，所以我们把注意力放在另外三个事件就可以了。
触发条件:
-
鼠标右键菜单的、、;
-
使用了相应的键盘组合键，比如:、;
就算你是随便按的，也会触发事件。高程中介绍在、和中，这几个before事件只会在真实会发生剪贴板事件的情况下触发，IE上则可以触发before。我实际测试的时候最新版也会乱按也会触发，所以限制应该是在早一点的版本上。
so 想说的是：before这几个事件最好不要用,有关于剪切板的处理最好放在、、上面。
使用姿势：
以copy为例:
上面是在上全局监听的，然而很多人不知道的是，我们还可以为某些dom单独添加剪切板事件：
其他事件也是一样的，这里就不赘述了。
兼容：
不同浏览器，所属的对象不同：在IE中这个对象是对象的属性，在、和中，这个对象是相应的对象的属性。所以我们在使用的时候，需要做一下如下兼容:
对象方法：
对象有三个方法: 、、
-
访问剪切板中的数据
参数： 接受一个参数，即要取得的数据的格式。
在复制、剪切、粘贴触发的事件的数据：
实际上在chorme上测试只有粘贴的时候才能用访问到数据，用法如下：
要粘贴的数据：
被复制/剪切的数据：
在复制和剪切中的数据，需要通过来访问:
-
修改剪切板中的数据
参数：第一个参数也是，第二个参数是要放在剪切板中的文本。
剩下的留在下面仿知乎/掘金复制大段文本添加版权信息那里再说。
-
:
这个方法就不太知道了，试了好久不知道怎么用(如果有大佬知道，可以在评论区指点一下)。
如果只是为了禁止复制，或者禁止粘贴，在下面还有另外的方法可以做到，并且可以细粒化操作。
如果学习不是为了装X，那么一切将毫无意义，来看这个东西可以在哪些场景使用：
实现很简单：取消默认复制之后，主要是在被复制的内容后面添加信息，然后根据clipboardData的setData()方法将信息写入剪贴板。
可以直接复制这段代码到本地去试试。
然后command+c、command+v，输出:
- 禁止复制+剪切
- 禁止右键，右键某些选项:全选，复制，粘贴等。
- 禁用文字选择，能选择却不能复制，体验很差。
- user-select 用css禁止选择文本。
可以把代码拷到本地玩一玩：
PS：
- 使用也可以禁用，但建议使用这样就不用去访问和的方法了。
- 示例中全局都禁用了，也可以对dom(某些区域)进行禁用。
破解防复制：
上面的防复制方法通过+实现的，所以思路就是：禁用+取消样式。
浏览器的话：打开浏览器控制台，按进入，勾选(禁止js)。
此时如果还不能复制的话，就要去找样式,取消这个样式就可以了。
所以那些盗版小说手打的，我真的不太能理解，Excuse me？？？不能使用clipboardData：
在IE中可以用实现。
上文提到过，在IE中是的属性。
而其他浏览器则是相应的对象的属性，这实际上是一种安全措施，防止未经授权的访问,为了兼容其他浏览器，所以我们不能通过来实现这种操作。
具体做法：
-
创建一个隐藏的框
-
点击的时候，将要复制的内容放进框中
-
选择文本内容
这里只能用或者才能选择文本。
-
document.execCommand("copy")，执行浏览器的复制命令。
点击复制内容的demo在这里，可以点进去看看。
工作之余了解一下这些东西还是很有趣的，也可以扩宽你的知识面。
事实上只要监听了这些事件，我们就可以对要剪切的内容进行各种各样的操作，比如:复制的时候更换文本，粘贴的时候查找有没有图片(上传图片)，或者文本的长度进行剪切等等。
以上2018.8.8
参考资料：
js高程 14.2.2操作剪贴板
网页上如何实现禁止复制粘贴以及如何破解
原生 js 实现点击按钮复制文本
-
腾讯云年中最大活动，注册即领500减350卷！云服务器最低3折，最低375元/年！戳此直达活动现场！
-
阿里云推行全民云计算计划，注册即领1000元代金卷，云服务器低至2折，最低293元/年！戳此直达活动！