JS 复制文本到剪贴板 - JavaScript

在 Web 开发中，有时候需要将某段文本复制到用户的剪贴板中。而 JavaScript 提供了一个方便的 API，用于实现这个功能。本文将介绍如何使用 JavaScript 实现复制文本到剪贴板的功能。

复制文本到剪贴板

实现复制文本到剪贴板的功能，需要以下几个步骤：

1. 创建一个临时的 DOM 元素，将文本内容赋值给它。
2. 将该元素添加到文档中。
3. 进行选择该元素的文本。
4. 复制选中的文本到剪贴板。
5. 将临时元素从文档中移除。

下面是具体的代码实现：

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

以上代码定义了一个名为 copyToClipboard 的函数，接收一个字符串参数 text，表示要复制到剪贴板的文本内容。函数实现了刚刚提到的 5 个步骤：

1. 创建了一个临时的 textarea 元素，并将 text 赋值给它。
2. 将临时元素添加到文档中。
3. 选中临时元素的文本内容。
4. 调用 document.execCommand('copy')，将选中的文本内容复制到剪贴板中。
5. 将临时元素从文档中移除。

可以看到，使用 JavaScript 实现复制文本到剪贴板的功能非常简单。

浏览器兼容性

在使用 JavaScript 实现复制文本到剪贴板的功能时，要注意浏览器兼容性。目前，大多数主流浏览器都支持 document.execCommand 方法，因此上述代码在大多数现代浏览器中都可以正常工作。

不过，在一些较老的浏览器中，可能会有兼容性问题。特别是在 Internet Explorer（IE）浏览器中，该方法支持的不够完善，建议在使用时进行兼容性测试。

结语

本文介绍了如何使用 JavaScript 实现复制文本到剪贴板的功能。通过 document.execCommand 方法，我们可以很方便地将文本内容复制到用户的剪贴板中，非常方便。