js 实现剪切板

实现剪切板功能的方法

方法一：使用 document.execCommand（已废弃但兼容性好）
复制文本到剪切板可以通过已废弃的 document.execCommand 方法实现，部分旧浏览器仍支持：

function copyToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

方法二：使用 Clipboard API（现代推荐）
现代浏览器支持异步的 Clipboard API，权限更安全：

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

方法三：兼容性兜底方案
结合两种方法，优先使用 Clipboard API，失败时回退到 execCommand：

async function copyToClipboard(text) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return;
    } catch (err) {}
  }
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

注意事项

• 权限问题：Clipboard API 在 HTTPS 或本地开发环境（localhost）中无需额外权限，其他环境可能触发权限请求。
• 用户交互：部分浏览器要求复制操作必须由用户触发（如点击事件）。
• 错误处理：始终捕获 Clipboard API 的错误，避免脚本中断。