1、复制文字到剪切板

复制文字到剪切板的原理很简单:

1. 通过document.createElement创建一个隐藏的文本框命名为input；
2. 将指定的数据赋值给input.value，并使用input.select选中要复制的内容;
3. 执行document.execCommand("copy")复制内容到剪切板；
4. 销毁创建的文本框；

详细的代码：

// value 为需要复制的内容
const value = "{a:1,b:2}";
// 1、创建DOM input框
const input = document.createElement("input");
// 2、隐藏input
input.style = { opacity: 0, height: 0, lineHeight: 0, fontSize: 0 };
// 3、将指定文本赋值给input
input.value = JSON.stringify(value);
// 4、将input插入文档
document.body.appendChild(input);
// 5、选中文本
input.select(binding.value);
// 6、复制到剪切板
const isCopySuccess = document.execCommand("copy");
// 7、复制成功后提示
isCopySuccess && alert("数据拷贝成功");
// 8、 销魂DOM
document.body.removeChild(input);

这是目前为止复制到剪切板最常用的方。HTML5标准新增了Clipboard API，但是只能在https下使用，感兴趣的同学可以查看阮一峰老师的剪贴板操作 Clipboard API 教程或者MDN的Clipboard API接口文档。

2、粘贴时获取剪切板的内容

目前获取剪切板的内容最好的方式是监听document的paste事件。paste事件的会在粘贴操作（Ctrl+V）时触发，然后使用javascript读取到粘贴的数据，我们就可以使用javascript任意操作这些数据。具体使用方式如下：

// 提前监听paste事件
document.addEventListener('paste', e => {
    // 获取到粘贴动作时剪切板的数据
    const text = e.clipboardData.getData('text');
    // 任意操作数据
    console.log(33, text);
});