如何在 JavaScript 中将文本复制到剪贴板？

剪贴板是一个计算机中的缓冲区，可以在不同应用程序之间传输数据。在日常生活中，我们经常会使用剪贴板来复制和粘贴文本、图像和其他媒体，从而提高工作效率。在JavaScript中，也可以使用剪贴板来复制文本。

以下是在JavaScript中将文本复制到剪贴板的方法。

使用 document.execCommand()

在Web浏览器中，可以使用document.execCommand()方法将文本复制到剪贴板。

function copyToClipboard(text) {
  var input = document.createElement('textarea');
  input.value = text;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
}

上面这段代码中，copyToClipboard()函数接收一个参数text，表示要复制的文本。它首先创建一个textarea元素，将要复制的文本赋值给该元素的value属性，并将该元素添加到body元素上。

然后，它使用input.select()方法选中textarea元素中的文本，接着使用document.execCommand('copy')方法将文本复制到剪贴板。

最后，它从body元素中删除了textarea元素。

使用异步剪贴板API

现代Web浏览器支持异步剪贴板API，可以使用navigator.clipboard对象将文本复制到剪贴板。这种方法更加简单和安全，因为它直接操作剪贴板，而不需要使用execCommand()方法，从而避免了其中的安全问题。

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
  } catch (err) {
    console.error('Failed to copy text: ', err);
  }
}

上面这段代码中，copyToClipboard()函数接收一个参数text，表示要复制的文本。它使用navigator.clipboard.writeText()方法将文本复制到剪贴板，使用了async/await语法，以便在异步方式下捕获错误。

现代浏览器的支持

异步剪贴板API是较新的Javascript函数，所以只有比较新的浏览器支持。以下是对主流浏览器的支持情况：

| 浏览器 | 版本 | | --- | --- | | Chrome | 66+ | | Firefox | 63+ | | Safari | 10.2+ | | Edge | 79+ |

结论

以上是两种将文本复制到剪贴板的方法，根据需要选择使用document.execCommand()方法或异步剪贴板API。还要注意，异步剪贴板API只适用于较新的浏览器。