前端er怎样操作剪切复制以及禁止复制+破解等

前言

有时候我们经常会碰到这些场景&＃xff1a;玩掘金、知乎的时候复制一段文字&＃xff0c;总是会在内容后面加上一些版权信息&＃xff0c;以及像小说网站等都有禁止选中&＃xff0c;禁止复制这种功能&＃xff0c;还有点击自动复制账号的功能。

我也经常遇到这些场景&＃xff0c;有时候会去想这后面到底是怎么做&＃xff0c;周末趁着有空去研究了一下&＃xff0c;然后发现这些都跟操作剪贴板有关系&＃xff0c;并且都不难&＃xff0c;了解一下基本都知道怎么做了&＃xff0c;整理分享一波给大家。

个人博客了解一下&＃xff1a;obkoro1.com

目录&＃xff1a;

• API介绍
• 实现类知乎/掘金复制大段文本添加版权信息
• 实现类起点网的防复制功能
• 破解防复制
• 点击复制功能

API介绍:

复制、剪切、粘贴事件&＃xff1a;

1. copy 发生复制操作时触发;
2. cut 发生剪切操作时触发;
3. paste 发生粘贴操作时触发;
4. 每个事件都有一个before事件对应&＃xff1a;beforecopy、beforecut、beforepaste;

这几个before一般不怎么用&＃xff0c;所以我们把注意力放在另外三个事件就可以了。

触发条件:

1. 鼠标右键菜单的复制、粘贴、剪切;

2. 使用了相应的键盘组合键&＃xff0c;比如:command&＃43;c、command&＃43;v;

   就算你是随便按的&＃xff0c;也会触发事件。高程中介绍在Chorme、Firefox和Safari中&＃xff0c;这几个before事件只会在真实会发生剪贴板事件的情况下触发&＃xff0c;IE上则可以触发before。我实际测试的时候最新版chorme也会乱按也会触发&＃xff0c;所以限制应该是在早一点的版本上。

   so 想说的是&＃xff1a;before这几个事件最好不要用,有关于剪切板的处理最好放在copy、cut、paste上面。

使用姿势&＃xff1a;

以copy为例:

document.body.oncopy &＃61; e &＃61;> {// 监听全局复制 做点什么}// 还有这种写法&＃xff1a;document.addEventListener("copy", e &＃61;> {// 监听全局复制 做点什么});


上面是在document.body上全局监听的&＃xff0c;然而很多人不知道的是&＃xff0c;我们还可以为某些dom单独添加剪切板事件&＃xff1a;

// html结构

其他事件也是一样的&＃xff0c;这里就不赘述了。

clipboardData对象:用于访问以及修改剪贴板中的数据

兼容&＃xff1a;

不同浏览器&＃xff0c;所属的对象不同&＃xff1a;在IE中这个对象是window对象的属性&＃xff0c;在Chrome、Safari和Firefox中&＃xff0c;这个对象是相应的event对象的属性。所以我们在使用的时候&＃xff0c;需要做一下如下兼容:

document.body.oncopy &＃61; e &＃61;> {let clipboardData &＃61; (e.clipboardData || window.clipboardData); // 获取clipboardData对象 &＃43; do something}


对象方法&＃xff1a;

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

• getData() 访问剪切板中的数据

  参数&＃xff1a; getData()接受一个&＃39;text&＃39;参数&＃xff0c;即要取得的数据的格式。

  在复制、剪切、粘贴触发的事件的数据&＃xff1a;

  实际上在chorme上测试只有paste粘贴的时候才能用getData()访问到数据&＃xff0c;用法如下&＃xff1a;

  要粘贴的数据&＃xff1a;

  document.body.onpaste &＃61; e &＃61;> {let clipboardData &＃61; (e.clipboardData || window.clipboardData); // 兼容处理console.log(&＃39;要粘贴的数据&＃39;, clipboardData.getData(&＃39;text&＃39;));
}


  被复制/剪切的数据&＃xff1a;

  在复制和剪切中的数据&＃xff0c;需要通过window.getSelection(0).toString()来访问:

  document.body.oncopy &＃61; e &＃61;> {console.log(&＃39;被复制的数据:&＃39;, window.getSelection(0).toString());
}


• setData(): 修改剪切板中的数据

  参数&＃xff1a;第一个参数也是&＃39;text&＃39;&＃xff0c;第二个参数是要放在剪切板中的文本。

  剩下的留在下面仿知乎/掘金复制大段文本添加版权信息那里再说。

• clearData() :

  这个方法就不太知道了&＃xff0c;试了好久不知道怎么用(如果有大佬知道&＃xff0c;可以在评论区指点一下)。

  如果只是为了禁止复制&＃xff0c;或者禁止粘贴&＃xff0c;在下面还有另外的方法可以做到&＃xff0c;并且可以细粒化操作。

应用:

如果学习不是为了装X&＃xff0c;那么一切将毫无意义&＃xff0c;来看这个东西可以在哪些场景使用&＃xff1a;

实现类知乎/掘金复制大段文本添加版权信息:

实现很简单&＃xff1a;取消默认复制之后&＃xff0c;主要是在被复制的内容后面添加信息&＃xff0c;然后根据clipboardData的setData()方法将信息写入剪贴板。

可以直接复制这段代码到本地去试试。

// 掘金这里不是全局监听&＃xff0c;应该只是监听文章的dom范围内。document.body.oncopy &＃61; event &＃61;> {event.preventDefault(); // 取消默认的复制事件 let textFont, copyFont &＃61; window.getSelection(0).toString(); // 被复制的文字 等下插入// 防知乎掘金 复制一两个字则不添加版权信息 超过一定长度的文字 就添加版权信息if (copyFont.length > 10) {textFont &＃61; copyFont &＃43; &＃39;\n&＃39;&＃43; &＃39;作者&＃xff1a;OBKoro1\n&＃39;&＃43; &＃39;链接&＃xff1a;https://juejin.im/user/58714f0eb123db4a2eb95372/posts\n&＃39;&＃43; &＃39;来源&＃xff1a;掘金\n&＃39;&＃43; &＃39;著作权归作者所有。商业转载请联系作者获得授权&＃xff0c;非商业转载请注明出处。&＃39;;} else {textFont &＃61; copyFont; // 没超过十个字 则采用被复制的内容。}if (event.clipboardData) {return event.clipboardData.setData(&＃39;text&＃39;, textFont); // 将信息写入粘贴板} else {// 兼容IEreturn window.clipboardData.setData("text", textFont);}}


然后command&＃43;c、command&＃43;v&＃xff0c;输出:

你复制的内容
作者&＃xff1a;OBKoro1
链接&＃xff1a;https://juejin.im/user/58714f0eb123db4a2eb95372/posts
来源&＃xff1a;掘金
著作权归作者所有。商业转载请联系作者获得授权&＃xff0c;非商业转载请注明出处。


实现类起点网的防复制功能:

• 禁止复制&＃43;剪切
• 禁止右键&＃xff0c;右键某些选项:全选&＃xff0c;复制&＃xff0c;粘贴等。
• 禁用文字选择&＃xff0c;能选择却不能复制&＃xff0c;体验很差。
• user-select 用css禁止选择文本。

可以把代码拷到本地玩一玩&＃xff1a;

// 禁止右键菜单document.body.oncontextmenu &＃61; e &＃61;> {console.log(e, &＃39;右键&＃39;);return false;// e.preventDefault();};// 禁止文字选择。document.body.onselectstart &＃61; e &＃61;> {console.log(e, &＃39;文字选择&＃39;);return false;// e.preventDefault();};// 禁止复制document.body.oncopy &＃61; e &＃61;> {console.log(e, &＃39;copy&＃39;);return false; // e.preventDefault();}// 禁止剪切document.body.oncut &＃61; e &＃61;> {console.log(e, &＃39;cut&＃39;);return false;// e.preventDefault();};// 禁止粘贴document.body.onpaste &＃61; e &＃61;> {console.log(e, &＃39;paste&＃39;);return false;// e.preventDefault();};// css 禁止文本选择 这样不会触发jsbody {user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}


PS&＃xff1a;

• 使用e.preventDefault()也可以禁用&＃xff0c;但建议使用return false这样就不用去访问e和e的方法了。
• 示例中document.body全局都禁用了&＃xff0c;也可以对dom(某些区域)进行禁用。

破解防复制&＃xff1a;

上面的防复制方法通过js&＃43;css实现的&＃xff0c;所以思路就是&＃xff1a;禁用js&＃43;取消user-select样式。

Chrome浏览器的话&＃xff1a;打开浏览器控制台&＃xff0c;按F1进入Setting&＃xff0c;勾选Disable Javascript(禁止js)。

此时如果还不能复制的话&＃xff0c;就要去找user-select样式,取消这个样式就可以了。

所以那些盗版小说手打的&＃xff0c;我真的不太能理解&＃xff0c;Excuse me&＃xff1f;&＃xff1f;&＃xff1f;

点击复制功能&＃xff1a;

不能使用clipboardData&＃xff1a;

在IE中可以用window.clipboardData.setData(&＃39;text&＃39;,&＃39;内容&＃39;)实现。

上文提到过&＃xff0c;在IE中clipboardData是window的属性。

而其他浏览器则是相应的event对象的属性&＃xff0c;这实际上是一种安全措施&＃xff0c;防止未经授权的访问,为了兼容其他浏览器&＃xff0c;所以我们不能通过clipboardData来实现这种操作。

具体做法&＃xff1a;

• 创建一个隐藏的input框
• 点击的时候&＃xff0c;将要复制的内容放进input框中

• 选择文本内容input.select()

  这里只能用input或者textarea才能选择文本。

• document.execCommand(“copy”)&＃xff0c;执行浏览器的复制命令。

  function copyText() {var text &＃61; document.getElementById("text").innerText; // 获取要复制的内容也可以传进来var input &＃61; document.getElementById("input"); // 获取隐藏input的dominput.value &＃61; text; // 修改文本框的内容input.select(); // 选中文本document.execCommand("copy"); // 执行浏览器复制命令alert("复制成功");
}


点击复制内容的demo在这里&＃xff0c;可以点进去看看。

结语

工作之余了解一下这些东西还是很有趣的&＃xff0c;也可以扩宽你的知识面。

事实上只要监听了这些事件&＃xff0c;我们就可以对要剪切的内容进行各种各样的操作&＃xff0c;比如:复制的时候更换文本&＃xff0c;粘贴的时候查找有没有图片(上传图片)&＃xff0c;或者文本的长度进行剪切等等&＃xff0c;唯一限制你的

希望看完的朋友可以点个喜欢/关注&＃xff0c;您的支持是对我最大的鼓励。

个人blog and 掘金个人主页&＃xff0c;如需转载&＃xff0c;请放上原文链接并署名。码字不易&＃xff0c;感谢支持&＃xff01;

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

以上2018.8.8

参考资料&＃xff1a;

js高程 14.2.2操作剪贴板

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

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