碎片时间学编程「12」:如何使用 JavaScript 将文本复制到剪贴板?

异步剪贴板 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 片段 的实现方式,并且应该适用于所有现代浏览器。

Document.execCommand('复制')

虽然对剪贴板 API 的支持非常全面,但如果您必须支持老版本的浏览器,则可能需要回调。如果是这种情况,您可以使用它Document.execCommand('copy')来执行此操作。这是一个快速的分步指南:

1、创建