HTML实现一键复制文本到剪贴板

平时写前端页面，复制功能看似简单，但真要兼容各种浏览器和场景，那坑可真不少。今天就来聊聊如何用好剪贴板 API，以及哪些地方容易翻车。

用 na vigator.clipboard.writeText() 最直接

现代浏览器基本都支持这个 API，调用一次就能把字符串写进系统剪贴板，不用依赖 Flash 或隐藏 textarea。但要注意它只能在安全上下文（HTTPS 或 localhost）中运行，HTTP 站点会直接报错 SecurityError。

实操建议：

• 必须由用户手势触发（比如 click 事件），不能在页面加载后自动执行，否则 Chrome/Firefox 会拒绝调用
• 需要处理 Promise 拒绝情况：网络权限未授予、用户拒绝权限、或调用时机不合法都会导致 .catch() 触发
• 示例代码片段：

  button.addEventListener('click', async () => {
    try {
      await na vigator.clipboard.writeText('要复制的文本');
    } catch (err) {
      console.error('复制失败:', err);
    }
  });

兼容老浏览器得 fallback 到 document.execCommand('copy')

IE11、Safari 12 以下、部分旧版安卓 WebView 不支持 na vigator.clipboard，这时候得退回到基于 textarea 的方案。核心是动态创建一个 textarea，设为可编辑、聚焦、选中内容，再执行 execCommand('copy')。

容易踩的坑：

• textarea 必须插入 DOM 且可见（不能 display: none 或 visibility: hidden），否则 Safari 和某些 Android 浏览器会静默失败
• 必须手动调用 select() 或 setSelectionRange()，仅设置 value 不够
• execCommand 已被标记为废弃，Chrome 90+ 在非用户手势下会警告，但目前仍能用

复制富文本或 HTML 内容要用 na vigator.clipboard.write()

如果想复制带样式的 HTML 片段（比如一段加粗文字或表格），writeText() 不行，得用更底层的 write()，传入 ClipboardItem 数组。它支持多种 MIME 类型，包括 text/html 和 text/plain。

注意事项：

• 不是所有浏览器都支持 text/html（Firefox 目前只支持 text/plain）
• 移动端 Safari 完全不支持 write()，只能降级为纯文本
• 必须确保 HTML 字符串是合法片段（不能包含 或 根标签）
• 示例：

  const htmlBlob = new Blob(['加粗文本'], {type: 'text/html'});
  const plainBlob = new Blob(['加粗文本'], {type: 'text/plain'});
  await na vigator.clipboard.write([
    new ClipboardItem({ 'text/html': htmlBlob, 'text/plain': plainBlob })
  ]);

权限提示和用户体验不能忽略

Chrome 和 Edge 在首次调用 na vigator.clipboard 时会弹出权限请求浮层，用户点“拒绝”后，后续调用会直接失败，且不会再次提示。所以不能假设每次都能成功。

实用做法：

• 按钮文案别写死“已复制”，应动态切换：“复制” → “复制成功” → （3 秒后）自动恢复为“复制”
• 失败时给出明确反馈，比如“请允许访问剪贴板”或“复制失败，请重试”，而不是只打 console
• 避免在无交互上下文中预检权限（如 na vigator.permissions.query() 返回 prompt 并不等于用户点了允许）

实际项目里最麻烦的不是 API 调用本身，而是降级逻辑的分支判断、移动端兼容性差异、以及权限状态的不可预测性。尤其在微信内置浏览器或 QQ 浏览器里，na vigator.clipboard 可能完全不可用，必须提前检测并准备备用方案。记住，好的复制体验不是“能复制就行”，而是让用户在任何环境下都能稳定、清晰地完成操作。