前端er怎样操作剪切复制以及禁止复制+破解等
前言
有时候我们经常会碰到这些场景:玩掘金、知乎的时候复制一段文字,总是会在内容后面加上一些版权信息,以及像小说网站等都有禁止选中,禁止复制这种功能,还有点击自动复制账号的功能。
我也经常遇到这些场景,有时候会去想这后面到底是怎么做,周末趁着有空去研究了一下,然后发现这些都跟操作剪贴板有关系,并且都不难,了解一下基本都知道怎么做了,整理分享一波给大家。
个人博客了解一下:obkoro1.com
目录:
- API介绍
- 实现类知乎/掘金复制大段文本添加版权信息
- 实现类起点网的防复制功能
- 破解防复制
- 点击复制功能
API介绍:
复制、剪切、粘贴事件:
copy
发生复制操作时触发;cut
发生剪切操作时触发;paste
发生粘贴操作时触发;- 每个事件都有一个before事件对应:
beforecopy
、beforecut
、beforepaste
;
这几个before一般不怎么用,所以我们把注意力放在另外三个事件就可以了。
触发条件:
- 鼠标右键菜单的
复制
、粘贴
、剪切
; - 使用了相应的键盘组合键,比如:
command+c
、command+v
;就算你是随便按的,也会触发事件。高程中介绍在
Chorme
、Firefox
和Safari
中,这几个before事件只会在真实会发生剪贴板事件的情况下触发,IE上则可以触发before。我实际测试的时候最新版chorme
也会乱按也会触发,所以限制应该是在早一点的版本上。so 想说的是:before这几个事件最好不要用,有关于剪切板的处理最好放在
copy
、cut
、paste
上面。
使用姿势:
以copy为例:
document.body.oncopy = e => {// 监听全局复制 做点什么}// 还有这种写法:document.addEventListener("copy", e => {// 监听全局复制 做点什么});
上面是在document.body
上全局监听的,然而很多人不知道的是,我们还可以为某些dom单独添加剪切板事件:
// html结构<div id="test1"></div><div id="test2"></div>// 写法一样:let test1 = document.querySelector('#test1');test1.oncopy = e => {// 监听test1发生的复制事件 做点什么// test1发生的复制事件会触发回调,其他地方不会触发回调}
其他事件也是一样的,这里就不赘述了。
clipboardData对象:用于访问以及修改剪贴板中的数据
兼容:
不同浏览器,所属的对象不同:在IE中这个对象是window
对象的属性,在Chrome
、Safari
和Firefox
中,这个对象是相应的event
对象的属性。所以我们在使用的时候,需要做一下如下兼容:
document.body.oncopy = e => {let clipboardData = (e.clipboardData || window.clipboardData); // 获取clipboardData对象 + do something}
对象方法:
对象有三个方法: getData()
、setData()
、clearData()
getData()
访问剪切板中的数据参数:
getData()
接受一个'text'
参数,即要取得的数据的格式。在复制、剪切、粘贴触发的事件的数据:
实际上在chorme上测试只有
paste
粘贴的时候才能用getData()
访问到数据,用法如下:要粘贴的数据:
document.body.onpaste = e => {let clipboardData = (e.clipboardData || window.clipboardData); // 兼容处理console.log('要粘贴的数据', clipboardData.getData('text'));}
被复制/剪切的数据:
在复制和剪切中的数据,需要通过
window.getSelection(0).toString()
来访问:document.body.oncopy = e => {console.log('被复制的数据:', window.getSelection(0).toString());}
setData():
修改剪切板中的数据参数:第一个参数也是
'text'
,第二个参数是要放在剪切板中的文本。剩下的留在下面仿知乎/掘金复制大段文本添加版权信息那里再说。
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 {// 兼容IEreturn window.clipboardData.setData("text", textFont);}}
然后command+c、command+v,输出:
你复制的内容
作者:OBKoro1
链接:https://juejin.im/user/58714f0eb123db4a2eb95372/posts
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
实现类起点网的防复制功能:
- 禁止复制+剪切
- 禁止右键,右键某些选项:全选,复制,粘贴等。
- 禁用文字选择,能选择却不能复制,体验很差。
- user-select 用css禁止选择文本。
可以把代码拷到本地玩一玩:
// 禁止右键菜单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 禁止文本选择 这样不会触发jsbody {user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}
PS:
- 使用
e.preventDefault()
也可以禁用,但建议使用return false
这样就不用去访问e
和e
的方法了。 - 示例中
document.body
全局都禁用了,也可以对dom(某些区域)进行禁用。
破解防复制:
上面的防复制方法通过js
+css
实现的,所以思路就是:禁用js
+取消user-select
样式。
Chrome
浏览器的话:打开浏览器控制台,按F1
进入Setting
,勾选Disable JavaScript
(禁止js)。
此时如果还不能复制的话,就要去找user-select
样式,取消这个样式就可以了。
所以那些盗版小说手打的,我真的不太能理解,Excuse me???
点击复制功能:
不能使用clipboardData:
在IE中可以用window.clipboardData.setData('text','内容')
实现。
上文提到过,在IE中clipboardData
是window
的属性。
而其他浏览器则是相应的event
对象的属性,这实际上是一种安全措施,防止未经授权的访问,为了兼容其他浏览器,所以我们不能通过clipboardData
来实现这种操作。
具体做法:
- 创建一个隐藏的
input
框 - 点击的时候,将要复制的内容放进
input
框中 - 选择文本内容
input.select()
这里只能用
input
或者textarea
才能选择文本。 document.execCommand("copy"),执行浏览器的复制命令。
function copyText() {var text = document.getElementById("text").innerText; // 获取要复制的内容也可以传进来var input = document.getElementById("input"); // 获取隐藏input的dominput.value = text; // 修改文本框的内容input.select(); // 选中文本document.execCommand("copy"); // 执行浏览器复制命令alert("复制成功"); }
点击复制内容的demo在这里,可以点进去看看。
结语
工作之余了解一下这些东西还是很有趣的,也可以扩宽你的知识面。
事实上只要监听了这些事件,我们就可以对要剪切的内容进行各种各样的操作,比如:复制的时候更换文本,粘贴的时候查找有没有图片(上传图片),或者文本的长度进行剪切等等,唯一限制你的
希望看完的朋友可以点个喜欢/关注,您的支持是对我最大的鼓励。
个人blog and 掘金个人主页,如需转载,请放上原文链接并署名。码字不易,感谢支持!
如果喜欢本文的话,欢迎关注我的订阅号,漫漫技术路,期待未来共同学习成长。
以上2018.8.8
参考资料:
js高程 14.2.2操作剪贴板
网页上如何实现禁止复制粘贴以及如何破解
原生 js 实现点击按钮复制文本
前端er怎样操作剪切复制以及禁止复制+破解等相关推荐
- 前端er怎样操作剪切复制以及禁止复制+破解等 1
前言 有时候我们经常会碰到这些场景:玩掘金.知乎的时候复制一段文字,总是会在内容后面加上一些版权信息,以及像小说网站等都有禁止选中,禁止复制这种功能,还有点击自动复制账号的功能. 我也经常遇到这些场景 ...
- 文件服务器防止资料拷贝,局域网如何防止文件被复制、禁止复制文件、如何防止文件拷贝的方法...
当前,很多企事业单位都组建了自己的内部局域网,同时也常常会在局域网搭建文件服务器,并且会将文件服务器的文件共享给局域网用户使用.同时,为了大家协同办公和资料保存的需要,通常会设置共享文件访问权限,一般 ...
- 如何复制网页禁止复制的内容
可能每次到了期末写报告的时候,都需要到网上参(摘)考(抄)一些资料,但是经常会出现下面的情况. 那遇到这种情况怎么办呢?有以下几种方法: 一.禁用网页JS以复制文本 复制之前可以想一下,究竟是什么技术 ...
- 前端复制、剪切、禁止复制等
前言 前两天基于vue和highlight写了一个代码展示的demo,里面用到了关于复制的功能,查了一些文章,在这里进行整理. 对代码展示demo感兴趣的可以看:vue3:基于highlight实现代 ...
- 网站禁止复制怎样操作
每天辛辛苦苦写一些文章,或者网站上面有一些版权的东西,经常有很多人都问我怎样能帮网站设置成网站禁止收录,这样的话就可以防止一些不是很专业的人负责我网站上面的东西了,其实大家也都知道如果真的是一个互联网 ...
- html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制. 禁止右键 οncοntextmenu="return false" 禁止 ...
- html页面禁止右键、禁止复制、禁止图片拖动、禁止复制和剪切禁止IOS长按复制粘贴实现
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切 众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制. 禁止右键oncontex ...
- WEB_前端_禁止复制粘贴
身份证号:<input type="text" /> 重复输入:<input type="text" οncοpy="alert(' ...
- 禁止页面复制功能 js禁止复制 禁用页面右键菜单
<body οncοntextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script t ...
最新文章
- OpenCV+Tensorflow实现实时人脸识别演示
- Docker获取镜像并运行
- 收藏的 sql经典语句 ---来自网上
- 一句话概括自动装箱/拆箱
- Hadoop源码分析16: IPC流程(11) 整体流程
- 激光雕刻机DIY之二:GRBL的下载与参数配置
- 计算机cf编程,警察牧马人宏自定义编程计算机游戏鼠标有线大声笑/ cf英雄联盟光速质量保证....
- 测试手机烧屏的软件,烧屏坏点检测
- 3、T5L迪文屏资源介绍
- 机器学习之决策树CART算法
- Saltstack_使用指南11_配置管理-状态之间依赖关系
- 保研复习——线性代数3:矩阵的秩与线性方程组
- HTML入门笔记12-HTML中备注写法
- 聚点 内部 内点 导集
- TiDB 报错: GC life time is shorter than transaction duration
- 常用的八款免费程序员喜欢的代码编辑器推荐「你用哪个」
- 成语学习微信小程序源码
- 遇到vmware提示客户机操作系统已禁用 CPU.请关闭或重置虚拟机
- 酷开系统鸿蒙,华为鸿蒙系统首发设备曝光!不是手机
- 云解析DNS“免费版”与“付费版”的功能对比!新手引导
热门文章
- Android开发万能Utils(工具大全)
- org.apache.subversion.javahl.ClientException: Previous operation has not finished
- Spring的配置文件详解
- USACO翻译:USACO 2014 FEB SILVER 三题
- cmd连接mysql连接:mysql-h主机地址-u用户名-p用户密码(注:u与root可以不用加)
- PCA原理分析和意义(一)
- Git新建分支出现fatal: Not a valid object name: ‘master‘错误
- Django 视图的FBV 与 CBV
- 在vue-cli中搭建mock服务器
- bzoj3140: [Hnoi2013]消毒(二分图)