如何实现复制到剪贴板？

将文本复制到用户剪贴板是现代Web应用的一个常见需求。实现这一功能主要有两种方式：使用现代的navigator.clipboard API或传统的document.execCommand方法。现代API更安全、简洁，是首选方案。

使用现代的Clipboard API

navigator.clipboard.writeText()方法接收一个字符串，并返回一个Promise。它将指定的文本写入系统剪贴板。这个方法要求在安全上下文（HTTPS或localhost）中运行，并且通常需要由用户手势（如点击）触发。

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已复制');
  } catch (err) {
    console.error('复制失败: ', err);
  }
}

// 在按钮点击事件中调用
document.getElementById('copyBtn').addEventListener('click', () => {
  copyToClipboard('需要复制的文本内容');
});

这种方法非常直接，代码清晰，错误处理也简单。它是目前处理纯文本复制最推荐的方式。

使用传统的execCommand方法作为回退

在不支持Clipboard API的旧浏览器中，我们可以使用document.execCommand(‘copy’)。它的原理是：先将要复制的文本放入一个临时的、可选的<textarea>或<input>元素中，然后选中该元素的内容，再执行复制命令。

function fallbackCopyText(text) {
  const textArea = document.createElement('textarea');
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();

  try {
    const successful = document.execCommand('copy');
    const msg = successful ? '成功' : '失败';
    console.log('传统方法复制' + msg);
  } catch (err) {
    console.error('传统方法出错: ', err);
  }
  document.body.removeChild(textArea);
}

这个过程需要将临时元素添加到DOM中，执行复制命令后立即移除。这个方法虽然有效，但较为繁琐，且在某些浏览器中存在兼容性问题。

一个结合两者的健壮函数

在实际项目中，为了获得最佳兼容性，可以先尝试现代API，如果失败则降级到传统方法。

function copyTextToClipboard(text) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    return navigator.clipboard.writeText(text).catch(() => {
      // 如果异步API出错，降级
      fallbackCopyText(text);
    });
  } else {
    fallbackCopyText(text);
  }
}

这个函数检查navigator.clipboard.writeText是否存在，如果存在则使用它，并在其Promise被拒绝时（例如由于权限问题）自动降级。否则，直接使用传统方法。

需要注意的是，出于安全考虑，浏览器对剪贴板的访问权限有严格限制。复制操作必须由用户主动触发（例如在click事件处理器中），而不能在异步回调或定时器中随意执行。对于更复杂的内容（如HTML），navigator.clipboard API还提供了write()方法，可以写入剪贴板项。