我此前所做的项目，有用到JavaScript操作剪切板，实现页面文本内容复制/粘贴。
今天，将这些代码片段稍加整理放在我的博客上，以备不时之需。同时，也希望能够帮助到有需要的朋友。
下面介绍两种方法：
方法一：document.execCommand
首先声明一下：document.execCommand 是一个不建议使用的过时的API，主要用于执行浏览器的内建编辑命令。由于安全性和跨浏览器兼容性问题，很多现代浏览器已不再支持或者弃用了这个功能。
被弃用
当然，说是这么说，我亲测过现在主流的浏览器（如：Chrome、Edge、Safari、FireFox）还是能用的。但是，将来就不好说了。别担心，我们还有第二种方法。
1、表单控件的复制
表单控件指的是input、textarea这一类，可以录入文本内容的。
- Html代码
<textarea id="input">Copy Me!</textarea>
- JS代码
var element = document.getElementById("input");
element.select();
document.execCommand('copy');
input.blur();
2、显示元件内容的复制
显示元件指的是，诸如div、p、span这一种。处理起来可能比表单控件，麻烦一点。因为多写几行代码来创建选区域，才能执行copy。
<div id="elem">
<p>Copy Me!</p>
</div>
- JS代码
var element = document.getElementById("content");
var range = document.createRange();
const selection = document.getSelection();
selection.removeAllRanges();
range.selectNodeContents(element);
selection.addRange(range);
document.execCommand('copy');
selection.removeAllRanges();
3、参数变量复制
最后一种情况就是js代码变量的复制。用一个隐藏的textarea来辅助完成，本质上还是表单控件那一套实现方法。
const text = "Copy Me!";
var input = document.createElement('textarea');
input.style.display = 'none';
document.body.appendChild(input);
input.value = text;
input.select();
document.execCommand('copy');
document.body.removeChild(input);
方法二：navigator.clipboard
这个API比起前面的那个，显得优雅太多了！而且也很“现代”，至少也用了现在非常流行的Promise语法。测试过浏览器的兼容性，也是非常不错的。因此，我估计这套API至少管用10年。
浏览器兼容性
1、读取剪切板文本
navigator.clipboard.readText().then(value=>{
console.log(value);
});
2、复制文本
const text = "Copy Me!";
navigator.clipboard.writeText(text).then(()=>{
alert("Copied.");
});
总结
除了以上两种方法，当然也还有不少第三方组件可以实现同样的功能，有兴趣的朋友可以自己去挖掘。
我个人认为，这两个原生API已经够用了。如果document.execCommand不行，那么就用navigator.clipboard，再不行的话，那就两个结合起来用，也无妨。
