Javascript中的复制粘贴功能

一、基本使用

1.1 API 介绍

复制、剪切、粘贴事件

• 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 对象:用于访问以及修改剪贴板中的数据