怎样用 JavaScript 把文字复制到剪贴板？

异步剪贴板 API

构建网站时一个非常普遍的需求是能够通过单击按钮将文本复制到剪贴板。如果您只需要支持现代浏览器，强烈建议使用异步​​剪贴板 API​​。它在所有现代浏览器中都受支持，并提供了一种简单安全的方式来更新剪贴板的内容。

您所要做的就是确保​​Navigator​​​，​​Navigator.clipboard​​​并且​​Navigator.clipboard.writeText​​​是真实的，然后调用​​Clipboard.writeText()​​​将值复制到剪贴板。如果出现任何问题，您可以使用​​Promise.reject()​​返回一个立即拒绝的承诺并保持返回类型一致。

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 片段​​的实现方式，并且应该适用于所有现代浏览器。

Document.execCommand('复制')

虽然对剪贴板 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 轻松处理。