将文本复制到剪贴板 JavaScript

在 Web 应用程序中，我们经常需要将用户输入或在页面中生成的文本复制到剪贴板中，以便用户轻松地粘贴到其他应用程序中。而 JavaScript 提供了一个简单的方法来实现这个功能。本文将介绍如何使用 JavaScript 将文本复制到剪贴板中。

使用 execCommand 方法

JavaScript 提供了一个名为 execCommand 的方法，它允许我们在文本编辑区域执行命令。其中，copy 命令将当前选择的文本复制到剪贴板中。

function copyToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  // 将 textarea 插入到文档中
  document.body.appendChild(textarea);
  // 选中 textarea 中的文本
  textarea.select();
  // 执行 copy 命令
  document.execCommand('copy');
  // 将 textarea 从文档中移除
  document.body.removeChild(textarea);
}

我们可以将上述代码封装为一个函数，在需要复制文本时调用。

使用 Clipboard API

除了 execCommand 方法外，现代浏览器还提供了 Clipboard API，它允许我们更方便地将文本复制到剪贴板中。

function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
  .then(() => {
    console.log(`Copied text to clipboard: ${text}`);
  })
  .catch(err => {
    console.error(`Error copying text: ${err}`);
  });
}

Clipboard API 提供了 writeText 方法，它接受一个文本参数并将其复制到剪贴板中。我们可以使用 then 和 catch 方法来处理复制成功和失败时的情况。

现在，我们已经了解了如何使用 JavaScript 将文本复制到剪贴板中。无论是使用 execCommand 方法还是 Clipboard API，代码都非常简单而且易于理解。在使用时，我们只需要将需要复制的文本传递给相应的函数即可。