在前端开发中，有时需要实现一些复制粘贴的功能，比如将某段文字复制到剪贴板中以便用户分享或保存。本文介绍如何使用 JavaScript 完成这个任务。
方法一：使用 document.execCommand()
document.execCommand() 是一个已经被标记为废弃的 API，但是它仍然可以在大部分浏览器中使用。以下是使用 document.execCommand() 实现复制文本的示例代码：
-------- ------------------------- - ----- -------- - ----------------------------------- -------------- - ----- ------------------------------------ ------------------ ----------------------------- ------------------------------------ -
在这个函数中，我们创建了一个 <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