原文： How to Copy Text to the Clipboard with JavaScript

当你构建高级网页和应用程序时，你有时会想添加复制功能。这可以让你的用户简单地点击一个按钮或图标来复制文本，而不是突出显示文本和点击键盘上的几个按钮。

这个功能主要是在有人需要复制激活码、恢复密钥、代码片段等时使用。你还可以添加一些功能，如屏幕上的警报或文本（可以是一个模态），以通知用户文本已被复制到他们的剪贴板。

以前你会用 document.execCommand() 命令来处理这个问题，但现在你可以使用 Clipboard API，它允许你响应剪贴板命令（剪切、复制和粘贴），并异步地从系统剪贴板读取和写入。

在这篇文章中，你将学习如何用 Clipboard API 将文本和图像写入（复制）到剪贴板。

如果你想快点看到方案，这里是代码：

<p id="myText">Hello World</p>
<button class="btn" onclick="copyContent()">Copy!</button>

<script>
  let text = document.getElementById('myText').innerHTML;
  const copyContent = async () => {
    try {
      await navigator.clipboard.writeText(text);
      console.log('Content copied to clipboard');
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  }
</script>

如果你不着急，让我们更多地了解 Clipboard API，并通过一个演示项目看看它是如何工作的。

如何检查浏览器的权限

重要的是要知道，Clipboard API 只支持通过 HTTPS 页面。在尝试写到剪贴板之前，你还应该检查浏览器的权限，以验证你是否有写的权限。你可以用 navigator.permissions 查询来做这件事：

navigator.permissions.query({ name: "write-on-clipboard" }).then((result) => {
  if (result.state == "granted" || result.state == "prompt") {
    alert("Write access granted!");
  }
});

如何将文本复制到剪贴板上

要用新的 Clipboard API 复制文本，你将使用异步的 writeText() 方法。这个方法只接受一个参数——要复制到剪贴板的文本。这可以是一个字符串，或者一个保存变量和其他字符串的模板字面量，或者一个用于保存字符串的变量。

由于这个方法是异步的，它返回一个 promise。如果剪贴板已经被成功更新，这个 promise 就会被解决（resolved），否则就会被拒绝（rejected）。

navigator.clipboard.writeText("This is the text to be copied").then(() => {
  console.log('Content copied to clipboard');
  /* Resolved - 文本被成功复制到剪贴板 */
},() => {
  console.error('Failed to copy');
  /* Rejected - 文本未被复制到剪贴板 */
});

你也可以结合使用 try/catch 和 async/await。

async function copyContent() {
  try {
    await navigator.clipboard.writeText('This is the text to be copied');
    console.log('Content copied to clipboard');
    /* Resolved - 文本被成功复制到剪贴板 */
  } catch (err) {
    console.error('Failed to copy: ', err);
    /* Rejected - 文本未被复制到剪贴板 */
  }
}

复制文本到剪贴板的例子

这里有一个演示，用一个真实的例子展示它是如何工作的。在这个例子中，我们正在从一个公共的引言 API 中获取引言。然后当你点击复制图标时，引言和它的作者被复制，显示你可以调整你复制到 writeText() 方法中的内容。

小结

在这篇文章中，你学会了如何使用 Clipboard API 用 JavaScript 将文本复制到剪贴板上，而不需要安装任何 JavaScript 库。

祝你编码愉快！