嘿，我来帮你搞定这个剪贴板复制的问题！先拆解下你当前代码里的问题，再给你一个能在所有现代浏览器上稳定运行的实现方案。

你当前代码的问题分析 #

• 变量未定义错误：你按钮的onclick里传的是copy，但这个变量根本没定义！你要复制的是邮箱地址，应该直接传字符串形式的邮箱，比如copyText('your-email@example.com')
• 异步操作未处理：navigator.clipboard.writeText是异步函数，直接调用的话可能还没完成复制就执行了后续代码，而且没做错误捕获，出问题也不知道原因
• 安全上下文限制：Clipboard API只能在HTTPS环境或者本地localhost下工作，如果你是用file://协议打开本地页面，API会直接失效

跨现代浏览器的稳定实现方案 #

下面是兼顾兼容性和可靠性的代码，既用了现代的Clipboard API，也加了传统的备用方案（以防极端情况）：

HTML部分

<button onclick="copyText('your-email@example.com')">点击复制我的邮箱</button>

JavaScript部分

// 主复制函数，优先用Clipboard API
async function copyText(text) {
  try {
    // 等待复制操作完成
    await navigator.clipboard.writeText(text);
    console.log(`${text} 复制成功！`);
    // 给用户一个可视化提示，比console.log更友好
    alert(`已复制邮箱：${text}`);
  } catch (err) {
    console.error('Clipboard API复制失败，尝试备用方案:', err);
    // 调用备用方案
    fallbackCopyTextToClipboard(text);
  }
}

// 备用复制方案（兼容旧版现代浏览器）
function fallbackCopyTextToClipboard(text) {
  // 创建一个隐藏的textarea来承载要复制的文本
  const textArea = document.createElement('textarea');
  textArea.value = text;
  
  // 把textarea放到视口外，避免影响页面布局
  textArea.style.position = 'fixed';
  textArea.style.left = '-999999px';
  textArea.style.top = '-999999px';
  document.body.appendChild(textArea);
  
  // 选中textarea里的文本
  textArea.focus();
  textArea.select();

  try {
    // 用传统的execCommand方法复制
    const successful = document.execCommand('copy');
    if (successful) {
      console.log(`${text} 通过备用方案复制成功！`);
      alert(`已复制邮箱：${text}`);
    } else {
      throw new Error('备用方案执行失败');
    }
  } catch (err) {
    console.error('所有复制方案都失败了:', err);
    alert('抱歉，复制失败，请手动复制邮箱地址');
  }

  // 移除临时创建的textarea
  document.body.removeChild(textArea);
}

关键注意事项 #

• 必须是用户触发的操作：浏览器会阻止非用户交互（比如页面自动加载时）触发的剪贴板操作，所以一定要绑定在点击、触摸这类用户主动触发的事件上
• 运行环境要求：确保网站在HTTPS环境部署，本地开发用localhost也没问题，不要用file://打开页面
• 测试建议：打开浏览器开发者工具的控制台，查看错误信息，方便排查问题

内容来源于stack exchange