前言

项目中遇到点击复制按钮，将信息复制到剪贴板的功能。于是直接网上冲浪一圈，直接使用Clipboard API解决了。在测试的过程中，给我提了个复制按钮点击报错的Bug，可是在我本地没有任何问题，在网上仔细查看发现Clipboard API虽然很强大，甚至可以复制图片到剪切板，但是兼容性那可就不太友好了，毕竟没有十全十美的技术。
于是只好再添加一种兼容性比较好document.execCommand()的方法了。
下面我们就简单介绍下这两种方法

---

一、异步 Clipboard API

Clipboard API 是下一代的剪贴板操作方法，比传统的document.execCommand()方法更强大、更合理。

它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。

navigator.clipboard属性返回 Clipboard 对象，所有操作都通过这个对象进行。

const clipboardObj = navigator.clipboard;

clipboardObj.writeText(value); // value 是添加到剪切板的内容

如果navigator.clipboard属性返回undefined，就说明当前浏览器不支持这个 API。
由于用户可能把敏感数据（比如密码）放在剪贴板，允许脚本任意读取会产生安全风险，所以这个 API 的安全限制比较多。
首先，Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。不过，开发环境（localhost）允许使用非加密协议。

二、Document.execCommand()

Document.execCommand()是操作剪贴板的传统方法，各种浏览器都支持。
复制时，先选中文本，然后调用document.execCommand('copy')，选中的文本就会进入剪贴板。

• 当需要选中的内容是文本输入标签(input、textarea)
  如果是文本输入标签，标签不可以赋予disable或者readonly，这会影响select()方法。

const inputElement = document.querySelector('#input');

inputElement.select();

document.execCommand('copy');

• 当需要选中的内容不是文本输入标签(input、textarea)
  需要主动创建一个可输入文本的标签（input和textarea）然后将待复制的文本赋值给这个标签，再调用.select()方法选中这个标签才能继续执行document.execCommand('copy')去复制。

---

总结

参考链接：https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html