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

参考文档: https://www.freecodecamp.org/chinese/news/copy-text-to-clipboard-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 只支持通过 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 - 文本未被复制到剪贴板 */
  }
}