如何使用JavaScript将文本复制到剪贴板

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

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

此功能主要用于有人需要拷贝激活码、恢复密钥、代码片段等。你还可以在屏幕上添加警报或文本等功能（可能是模态），以通知用户文本已复制到剪贴板。

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

在本文中，你将学习如何使用剪贴板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>

如果你不着急，让我们了解更多关于剪贴板API的信息，看看它如何与演示项目配合使用。

如何检查浏览器的权限

重要的是要知道，剪贴板API仅支持通过HTTPS服务的页面。在尝试写入剪贴板之前，你还应该检查浏览器权限，以验证你是否具有写入权限。你可以使用navigator.permissions查询执行此操作：

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

如何将文本复制到剪贴板

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

由于此方法是异步的，因此它会返回promise。如果剪贴板已成功更新，否则被拒绝，此承诺将得到解决：

navigator.clipboard.writeText("This is the text to be copied").then(() => {
  console.log('Content copied to clipboard');
  /* Resolved - text copied to clipboard successfully */
},() => {
  console.error('Failed to copy');
  /* Rejected - text failed to copy to the clipboard */
});

你还可以在尝试/捕获的同时使用异步/等待：

async function copyContent() {
  try {
    await navigator.clipboard.writeText('This is the text to be copied');
    console.log('Content copied to clipboard');
    /* Resolved - text copied to clipboard successfully */
  } catch (err) {
    console.error('Failed to copy: ', err);
    /* Rejected - text failed to copy to the clipboard */
  }
}

将文本拷贝到剪贴板示例

这里有一个演示，展示了它如何使用现实生活中的例子。在本例中，我们正在从公共引用API获取引号。然后，当你单击复制图标时，引用及其作者将被复制，这表明你可以将复制的内容调整到writeText()方法中。

总结

在本文中，你已经学习了如何使用剪贴板API使用JavaScript将文本复制到剪贴板，而无需跳出框框思考或安装任何JavaScript库。