最近的项目上需要做复制粘贴相关的操作,来总结下吧
复制、剪切、粘贴事件:
- copy 发生复制操作时触发;
- cut 发生剪切操作时触发;
- paste 发生粘贴操作时触发;
每个事件都有一个 before 事件对应:beforecopy、beforecut、beforepaste;
这几个 before 一般不怎么用,所以我们把注意力放在三个事件就可以了。
触发条件:
- 鼠标右键菜单的复制、粘贴、剪切;
- 使用了相应的键盘组合键,比如:ctrl+c、ctrl+v;
复制操作:
copy事件使用示例:
<body>
gggwgzgf
</body>
<script type="text/javascript">
document.body.oncopy = e => {
// 监听全局复制 做点什么
console.log(e)
};
</script>
我们可以看到事件对象中的属性:
我们主要研究的是里面的clipboardData
属性对象
clipboardData
对象: 用于访问以及修改剪贴板中的数据
clipboardData对象中有两个方法:
-
getData():
常配合copy事件使用,用于设置到剪贴板中的值 -
setData():
常配合paste事件使用,用于获取设置到剪贴板中的值
兼容:
不同浏览器,所属的对象不同:在 IE
中这个对象是window对象的属性,在Chrome、Safari和Firefox中,这个对象是相应的event对象的属性。所以我们在使用的时候,需要做一下如下兼容:
document.body.oncopy = e => {
let clipboardData = e.clipboardData || window.clipboardData;
// 获取clipboardData对象 + do something
};
copy配合getSelection实现复制某段文本:
<body>
gggwgzgf
</body>
<script type="text/javascript">
document.body.oncopy = e => {
console.log(window.getSelection().toString())
let copyMsg = window.getSelection().toString()
//把值设置到剪贴板中,方便paste事件触发去拿
e.clipboardData.setData("Text", copyMsg);
};
</script>
为了方便,这次,我直接使用ctrl+c测试了
注意:window.getSelection().toString()
我是调用toString()
方法转成文本的,如果不调用这个方法,直接通过window.getSelection()
取到值存到剪贴板会有出奇的效果,后面会说到,需要配合paste事件
粘贴paste事件
使用示例:
<body>
gggwgzgf
<input placeholder="这里存放粘贴操作的值" />
</body>
<script type="text/javascript">
document.body.oncopy = e => {
console.log(window.getSelection().toString())
let copyMsg = window.getSelection().toString()
e.clipboardData.setData("Text", copyMsg);
};
document.body.onpaste=function(e){
var data = e.clipboardData.getData("Text")
document.querySelector("input").value = data
}
</script>
到这里,你可能有个疑问,只能复制粘贴文本吗,图片可以吗?
这是可以的。
通过patse事件获取剪切板中的图片:
<script type="text/javascript">
document.addEventListener('paste', function(event) {
var items = (event.clipboardData && event.clipboardData.items) || [];
var file = null;
if(items && items.length) {
for(var i = 0; i < items.length; i++) {
if(items[i].type