如何将文本复制到用户的剪贴板？

介绍使用 Clipboard API 和 execCommand 方法来实现向用户剪贴板写入内容。

JavaScript 中等 API Clipboard

在浏览器中向用户的剪贴板写入内容主要通过两种方式实现：推荐使用现代的Clipboard API（如navigator.clipboard.writeText），或使用已弃用的旧方法document.execCommand('copy')。

推荐方法：使用navigator.clipboard.writeText

这种方法符合当前 Web 标准，是异步操作，在大多数现代浏览器（Chrome 66+、Firefox、Safari 13+、Edge 79+）中支持：

实现步骤：
1. 确保页面通过HTTPS协议加载（开发环境localhost例外）。
2. 方法必须在用户交互上下文中触发（例如点击事件）。
3. 使用Promise处理成功和错误情况。

代码示例：

<!DOCTYPE html>
<html>
<body>
  <button id="copyBtn">复制内容</button>
  <script>
    document.getElementById('copyBtn').addEventListener('click', async () => {
      const textToCopy = 'Hello, this text is copied to clipboard!';
      try {
        await navigator.clipboard.writeText(textToCopy);
        console.log('内容成功复制到剪贴板');
      } catch (error) {
        console.error('复制失败:', error);
      }
    });
  </script>
</body>
</html>

已弃用的旧方法：使用document.execCommand(‘copy’)

虽然有些旧版本浏览器（如IE10+和部分老版本）支持，但该方法已被标记为不推荐使用（deprecated）：

实现步骤：
1. 创建一个临时HTML元素（如input）放置内容。
2. 使用select()选择元素内容。
3. 调用document.execCommand(‘copy’)完成复制。
4. 清理临时元素。

代码示例：

function copyTextToClipboard(text) {
  const tempInput = document.createElement('textarea');
  tempInput.value = text;
  document.body.appendChild(tempInput);
  tempInput.select();
  try {
    const success = document.execCommand('copy');
    console.log(success ? '复制成功' : '复制失败');
  } catch (err) {
    console.error('复制出错:', err);
  } finally {
    document.body.removeChild(tempInput);
  }
}

// 触发调用（必须用户交互上下文）
document.querySelector('button').addEventListener('click', () => copyTextToClipboard('Sample Text'));

注意事项

安全性限制：写入剪贴板可能导致隐私问题，用户代理（浏览器）会限制未授权上下文的访问。

浏览器兼容性：新API要求浏览器兼容，可使用特征检测检查：

if (!navigator.clipboard || !navigator.clipboard.writeText) {
  console.log('你的浏览器不支持Clipboard API，可使用备用方案');
}

避免错误：在处理敏感内容（如密码）时优先获得用户授权。建议首选navigator.clipboard.writeText以实现更安全、高效的解决方案。