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

您可能希望在创建复杂的网页和应用程序时包含复制功能。您的用户无需选择文本并按几个键盘按键即可复制，而是可以通过单击按钮或图标来复制文本。

当需要复制激活码、恢复密钥、代码片段等时，通常会使用此功能。为了让用户知道文本已被复制到剪贴板，您还可以包含诸如警报或屏幕文本（可以是模态框）之类的功能。

过去，人们会使用 document.execCommand() 命令来完成此操作，但该命令已被弃用。现在可以使用剪贴板 API，它允许您异步地从系统剪贴板读取和写入，并响应剪贴板活动（剪切、复制和粘贴）。JavaScript 的剪贴板 API 可用于将文本复制到剪贴板。您可以使用剪贴板 API 读取和写入剪贴板，它提供了一种与剪贴板通信的方式。

在本教程中，您将学习如何使用剪贴板 API 将文本和图像写入（复制）到剪贴板。

如何检查浏览器权限

请务必注意，只有通过 HTTPS 提供的页面才兼容剪贴板 API。在尝试写入剪贴板之前，应检查浏览器的权限，以确保您拥有写入权限。您可以使用 .permissions 表达式在 navigator 中找到帮助。

以下是如何使用剪贴板 API 将文本复制到剪贴板的方法：

创建一个按钮或任何将触发复制操作的元素。

例如

为将触发复制操作的按钮添加事件监听器。在事件监听器内部，您需要调用剪贴板 API 的 writeText 方法将文本写入剪贴板。

例如

在上面的示例中，我们首先使用 document.querySelector 选择按钮，然后使用 addEventListener 向其添加事件监听器。在事件监听器内部，我们调用剪贴板 API 的 writeText 方法，并将要复制的文本作为参数传递。 writeText 方法返回一个 Promise，因此我们使用 .then 来处理成功的情况，并使用 .catch 来处理任何错误。

确保在您的网站中请求“clipboard-write”权限。没有此权限，navigator.clipboard.writeText 将会失败。将以下代码行添加到 HTML 文件的 head 部分：

就是这样！当用户单击按钮时，文本将被复制到剪贴板。请注意，此方法适用于大多数现代浏览器，但某些旧浏览器可能不支持。在这种情况下，您可能需要使用备用方法，例如使用隐藏的输入字段来存储文本，然后使用 document.execCommand('copy') 选择它。

示例：在这种情况下，将使用上述策略。

输出

在此，单击按钮可从文本字段复制文本。稍后尝试在另一个窗口中粘贴文本（例如 ctrl+v），以查看效果。