JavaScript 复制文本到剪贴板-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，有时需要实现一些复制粘贴的功能，比如将某段文字复制到剪贴板中以便用户分享或保存。本文介绍如何使用 JavaScript 完成这个任务。

方法一：使用 document.execCommand()

document.execCommand() 是一个已经被标记为废弃的 API，但是它仍然可以在大部分浏览器中使用。以下是使用 document.execCommand() 实现复制文本的示例代码：

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

在这个函数中，我们创建了一个 <textarea> 元素，并将要复制的文本赋值给它的 value 属性。接着将该元素添加到 document.body 中、选中它的内容并执行 document.execCommand('copy') 命令来将文本复制到剪贴板。最后删除该元素。

这种方法非常简单，但由于该 API 已被标记为废弃，未来可能会被移除。因此，我们不建议在生产环境中使用。

方法二：使用 Clipboard API

Clipboard API 是一个较新的 API，它支持将数据（包括文本、图像等）存储到系统剪贴板中。以下是使用 Clipboard API 实现复制文本的示例代码：

-- -------------------- ---- -------
-------- ------------------------- -
  -----------------------------------
    -------- -- -
      ----------------- ------ -- ------------
    --
    -------------- -- -
      -------------------- ------- ----- -----------
    ---
-

在这个函数中，我们调用 navigator.clipboard.writeText() 方法将要复制的文本存储到系统剪贴板中。该方法返回一个 Promise 对象，因此我们可以使用 .then() 和 .catch() 方法处理成功和失败的情况。

与 document.execCommand() 相比，Clipboard API 更加安全和可靠。但它仅适用于较新的浏览器，如果需要支持旧版本浏览器，建议同时使用两种方法。

结论

通过以上介绍，我们了解了实现复制文本到剪贴板的两种方法，并分别给出了示例代码。其中，document.execCommand() 是一种简单但不建议在生产环境中使用的方法，而 Clipboard API 则更加安全可靠，但需要较新的浏览器支持。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/30821