Javascript中的复制粘贴功能
栏目: JavaScript · 发布时间: 5年前
内容简介:每个事件都有一个以上面是在
复制、剪切、粘贴事件
copy cut paste
每个事件都有一个 before
事件对应: beforecopy
、 beforecut
、 beforepaste
。这几个 before
一般不怎么用,所以我们把注意力放在另外三个事件就可以了
触发条件
- 鼠标右键菜单的
复制
、粘贴
、剪切
- 使用了相应的键盘组合键,比如:
command+c
、command+v
使用姿势
以 copy
为例
document.body.oncopy = e => { // 监听全局复制 做点什么 }; // 还有这种写法: document.addEventListener('copy', e => { // 监听全局复制 做点什么 });
上面是在 document.body
上全局监听的,然而很多人不知道的是,我们还可以为某些 dom
单独添加剪切板事件
// html结构 <div id="test1"></div> <div id="test2"></div> <script> // 写法一样: let test1 = document.querySelector('#test1'); test1.oncopy = e => { // 监听test1发生的复制事件 做点什么 // test1发生的复制事件会触发回调,其他地方不会触发回调 } </script>
其他事件也是一样的
1.2 clipboardData
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()
二、应用
2.1 复制大段文本
实现类知乎/掘金复制大段文本添加版权信息
实现很简单:取消默认复制之后,主要是在被复制的内容后面添加信息,然后根据 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/58714f0e325b123db4a2eb95372/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 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
2.2 防复制功能
- 禁止复制+剪切
- 禁止右键,右键某些选项:全选,复制,粘贴等。
- 禁用文字选择,能选择却不能复制,体验很差。
-
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 禁止文本选择 这样不会触发js**/ body { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
- 使用
e.preventDefault()
也可以禁用,但建议使用return false
这样就不用去访问e
和e
的方法了。 - 示例中
document.body
全局都禁用了,也可以对dom
(某些区域)进行禁用
破解防复制
上面的防复制方法通过 js+css
实现的,所以思路就是:禁用 js+取消user-select
样式。
Chrome
浏览器的话:打开浏览器控制台,按 F1
进入 Setting
,勾选 Disable
JavaScript
(禁止 js
)。
此时如果还不能复制的话,就要去找 user-select
样式,取消这个样式就可以了
2.3 点击复制功能
不能使用 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的dom input.value = text; // 修改文本框的内容 input.select(); // 选中文本 document.execCommand('copy'); // 执行浏览器复制命令 alert('复制成功'); }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 复制粘贴比依赖更好
- Echarts 系列之复制粘贴大法
- 如何使用git检测复制和粘贴代码?
- 最简单爬虫rvest_告别复制粘贴
- 除了“复制粘贴”,安全圈的抄袭更复杂
- 在Debian 9 vim中启用鼠标复制粘贴
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入浅出React和Redux
程墨 / 机械工业出版社 / 2017-4-28 / 69
本书作者是资深开发人员,有过多年的开发经验,总结了自己使用React和Redux的实战经验,系统分析React和Redux结合的优势,与开发技巧,为开发大型系统提供参考。主要内容包括:React的基础知识、如何设计易于维护的React组件、如何使用Redux控制数据流、React和Redux的相结合的方式、同构的React和Redux架构、React和Redux的性能优化、组件的测试等。一起来看看 《深入浅出React和Redux》 这本书的介绍吧!