js复制文本到剪贴板

在 JavaScript 中，你可以使用 Clipboard API 或者 Document.execCommand 方法来复制文本到剪贴板。Clipboard API 是现代浏览器中推荐使用的方式，但为了兼容性，我们也会提到 Document.execCommand 方法。

使用 Clipboard API

function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
    .then(() => {
      console.log('Text successfully copied to clipboard');
    })
    .catch(err => {
      console.error('Unable to copy text to clipboard', err);
    });
}

// 使用示例
const textToCopy = 'Hello, Clipboard!';
copyToClipboard(textToCopy);

这个例子中，我们定义了一个 copyToClipboard 函数，它使用 navigator.clipboard.writeText(text) 来异步写入文本到剪贴板。这个方法返回一个 Promise，可以通过 .then() 处理成功的情况，或者通过 .catch() 处理失败的情况。

使用 Document.execCommand 方法

function copyToClipboardLegacy(text) {
  const textArea = document.createElement('textarea');
  textArea.value = text;

  // 将 textarea 元素添加到 DOM 中
  document.body.appendChild(textArea);

  // 选择文本
  textArea.select();

  try {
    // 尝试执行复制命令
    document.execCommand('copy');
    console.log('Text successfully copied to clipboard');
  } catch (err) {
    console.error('Unable to copy text to clipboard', err);
  } finally {
    // 移除添加的 textarea 元素
    document.body.removeChild(textArea);
  }
}

// 使用示例
const textToCopyLegacy = 'Hello, Clipboard (legacy)!';
copyToClipboardLegacy(textToCopyLegacy);

这个例子中，我们创建了一个临时的 textarea 元素，将文本赋值给它，然后将它添加到 DOM 中，选择文本，执行复制命令，最后将它从 DOM 中移除。这是为了模拟将文本复制到剪贴板的操作。

请注意，使用 Clipboard API 是更现代、更可靠的方式，但 Document.execCommand 方法在一些浏览器中仍然能够提供兼容性。最好根据你的项目需求和浏览器支持情况来选择使用哪种方法。