复制到剪贴板 JavaScript

复制到剪贴板是一项很经典的功能，它在开发中有着广泛的应用。本文将介绍如何使用 JavaScript 实现复制到剪贴板功能。

方式一：使用 execCommand 方法

在过去，浏览器使用 execCommand 方法实现复制到剪贴板，代码如下：

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

这个方法创建了一个 textarea 元素，让它的值等于要复制的文本，然后选中这个元素的值，调用 document.execCommand('copy') 实现复制。最后清除这个元素。

这种方式可以在大部分浏览器上实现，但是在最新版本的 Safari 和 Firefox 中被禁用了。

方式二：使用 Clipboard API

为了解决 execCommand 方法在某些浏览器上不可用的问题，Chrome 和 Firefox 推出了 Clipboard API。它可以让我们更加安全地实现复制到剪贴板功能。代码如下：

function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
    .then(() => alert('复制成功!'))
    .catch(err => console.log('复制失败: ', err));
}

这段代码使用 navigator.clipboard 对象的 writeText 方法实现复制。当成功复制时，弹出提示框告诉用户复制成功；当复制失败时，输出异常信息到控制台。

需要注意的是：该 API 仅在 HTTPS 网站上可用。

方式三：使用 document.createRange 和 Selection 对象

还有一种方式是使用 createRange 和 Selection 对象，它比较繁琐，但是在一些较老的浏览器上比较实用，代码如下：

function copyToClipboard(text) {
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(document.body);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
  selection.removeAllRanges();
}

这段代码首先创建了一个 Range 对象，并且将该 Range 对象指定到文本节点上。接着创建了一个 Selection 对象，调用它的 removeAllRanges 方法清除默认选区并将 Range 对象添加到它上面。最后使用 execCommand 方法实现复制，并清除选区。

和方式一类似，执行这个代码只需要调用 copyToClipboard 函数并传递需要复制的文本即可。

至此，我们讲解了复制到剪贴板的三种实现方式，各有优缺点。想要实现更强大的复制功能，可以使用 Clipboard API 2.0。详细的实现方式可以参考 MDN 文档。