让用户复制邀请码：做个复制按钮这么难吗

页面上放了一串邀请码，让用户自己拿鼠标选中、右键、复制——我猜十个人里有三个懒得弄。

加个按钮点一下就复制，本来以为一行代码的事，结果本地测得好好的，部署到服务器上点了没反应。查了一圈才明白原因。这篇把整个实现和坑讲清楚。

一、现代写法：navigator.clipboard

现在标准 API 是这个：

async function copyText(text) {
  await navigator.clipboard.writeText(text)
}

就一行，而且返回 Promise，可以 await。

接上按钮：

<span id="code">ABC123XYZ</span>
<button id="copyBtn">复制</button>

document.getElementById('copyBtn').addEventListener('click', async () => {
  const text = document.getElementById('code').textContent
  try {
    await navigator.clipboard.writeText(text)
    console.log('复制成功')
  } catch (e) {
    console.error('复制失败', e)
  }
})

二、为什么本地行、线上不行

这是最常遇到的问题：navigator.clipboard 只在"安全上下文"里可用。

不同环境下能不能用，对照一下：

所谓安全上下文，简单说就是：

• https:// 开头的页面 ✅
• http://localhost 或 127.0.0.1 ✅（本地开发特例）
• 局域网 IP，比如 http://192.168.1.10:8080 ❌
• 普通 http:// 域名 ❌

所以你在自己电脑上 localhost 测一切正常，部署到内网测试服务器用 IP 访问就废了，甚至 navigator.clipboard 这个对象直接是 undefined。

判断一下有没有：

if (!navigator.clipboard) {
  console.log('当前环境不支持 Clipboard API')
}

解决办法就一个：上 HTTPS。 现在证书也不贵，Let’s Encrypt 免费。别想着绕过这个限制，它是浏览器的安全策略。

三、兜底方案

如果确实要照顾老浏览器或者不支持的环境，可以用老办法——造一个隐藏的 textarea，选中它，执行 document.execCommand('copy')：

function copyFallback(text) {
  const ta = document.createElement('textarea')
  ta.value = text
  ta.style.position = 'fixed'
  ta.style.left = '-9999px'      // 挪到屏幕外，别让人看见
  document.body.appendChild(ta)
  ta.select()

  try {
    const ok = document.execCommand('copy')
    return ok
  } catch (e) {
    return false
  } finally {
    document.body.removeChild(ta)
  }
}

组合一下，能用新的就用新的：

async function copy(text) {
  if (navigator.clipboard && window.isSecureContext) {
    try {
      await navigator.clipboard.writeText(text)
      return true
    } catch (e) {
      // 继续走兜底
    }
  }
  return copyFallback(text)
}

要说明的是，execCommand 已经被标记为废弃，只是目前所有浏览器还支持。写兜底没问题，但别把它当主力。

四、必须由用户主动触发

浏览器不允许在没有任何用户操作的情况下写剪贴板——想象一下你打开个网页，它偷偷把你剪贴板里的内容换掉了，多吓人。

所以 writeText 必须在用户手势（点击、按键等）的回调里调用：

// 可以
button.addEventListener('click', async () => {
  await navigator.clipboard.writeText('xxx')
})

// 不行：页面加载后延迟执行，不算用户手势
setTimeout(async () => {
  await navigator.clipboard.writeText('xxx')   // 会失败
}, 3000)

如果你在异步请求的回调里再调复制，也可能失效，因为"用户手势"的上下文已经断了。正确顺序是先复制、再发请求，或者提前把要复制的内容准备好。

五、给个反馈

复制这个动作没有任何视觉变化，用户点完不知道成功没有。加个提示：

const btn = document.getElementById('copyBtn')

btn.addEventListener('click', async () => {
  const ok = await copy(document.getElementById('code').textContent)
  if (!ok) {
    btn.textContent = '复制失败'
    return
  }
  btn.textContent = '已复制 ✓'
  setTimeout(() => { btn.textContent = '复制' }, 2000)   // 两秒后复原
})

那个两秒复原的定时器别忘了，不然按钮永远显示"已复制"，再点一次用户会以为没生效。

几个容易忽略的点

• 复制的内容要不要带格式。writeText 只复制纯文本，够用了。如果要复制带样式的富文本，得用 ClipboardItem，兼容性更差，一般不需要。

• 复制前先 trim。页面上取出来的文本经常带前后空格或换行：

  const text = el.textContent.trim()
  

• 移动端也支持，但 iOS Safari 上有个限制：复制操作必须在同步的用户事件里发起。所以如果你在 await 之后再调 writeText，iOS 上可能失败。稳妥做法是把复制放在回调的第一行，别夹在 await 中间。

• 权限提示。部分浏览器第一次会弹权限询问，用户拒绝后 writeText 会抛异常，记得 catch 住给个友好提示，别让页面报错。

• 别复制太长的内容。几 MB 的文本塞进剪贴板会让浏览器卡一下，没必要。

• 复制完不要自动跳转或者弹 alert。弹窗会打断用户，体验很差，用按钮文案变化这种轻量反馈就好。

小结

复制按钮的实现核心就一句 navigator.clipboard.writeText()，但它有几个绕不开的约束：必须是 HTTPS（localhost 除外）、必须在用户点击的回调里调用。这两条不满足，代码写得再对也不生效。剩下的就是体验细节——加个"已复制"的按钮反馈、内容先 trim、老环境给个 execCommand 兜底。