异步剪贴板 API
构建网站时一个非常普遍的需求是能够通过单击按钮将文本复制到剪贴板。如果您只需要支持现代浏览器，强烈建议使用异步剪贴板 API。它在所有现代浏览器中都受支持，并提供了一种简单安全的方式来更新剪贴板的内容。
您所要做的就是确保Navigator，Navigator.clipboard 和 Navigator.clipboard.writeText 可用，然后调用Clipboard.writeText() 将值复制到剪贴板。如果出现任何问题，您可以使用 Promise.reject() 返回一个立即拒绝的 Promise 并保持返回类型一致。
const copyToClipboard = str => {
if (navigator && navigator.clipboard && navigator.clipboard.writeText)
return navigator.clipboard.writeText(str);
return Promise.reject('The Clipboard API is not available.');
};
这几乎就是 copyToClipboardAsync 片段 的实现方式，并且应该适用于所有现代浏览器。
虽然对剪贴板 API 的支持非常全面，但如果您必须支持老版本的浏览器，则可能需要回调。如果是这种情况，您可以使用它Document.execCommand('copy')来执行此操作。这是一个快速的分步指南：
1、创建 <textarea> 要附加到文档的元素。将其值设置为要复制到剪贴板的字符串。
2、将元素附加<textarea>到当前 HTML 文档并使用 CSS 将其隐藏以防止闪烁。
3、用于HTMLInputElement.select()选择元素的内容<textarea>。
4、用于Document.execCommand('copy')将 的内容复制<textarea>到剪贴板。
5、从文档中删除<textarea>元素。
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
请记住，此方法不会在任何地方都有效，而只能作为用户操作的结果（例如在click事件侦听器内部），这取决于 Document.execCommand() 的工作方式。
还有一些其他考虑因素，例如恢复用户之前在文档上的选择，这可以使用 JavaScript 轻松处理。您可以在c后面文章中学到具有这些改进的最终代码。
更多学习内容，请访问我的网站：https://www.icoderoad.com
