必须在 HTTPS 或 localhost 环境下，且由用户点击等显式手势触发 navigator.clipboard.writeText() 才有效；需处理 Promise 拒绝并提供友好提示，长文本或富文本需用 clipboard.write() 且兼容性更差。
点击按钮就复制，但 navigator.clipboard.writeText() 报错 Permission denied
直接调用 navigator.clipboard.writeText("hello") 在非安全上下文（比如 http:// 协议）或非用户手势触发时会失败，浏览器会抛出 NotAllowedError: Write permission denied。这不是代码写错了，而是浏览器的强制限制。
必须同时满足两个条件：页面运行在 https://（或 localhost），且调用发生在用户显式交互事件中（如 click、keydown）。不能放在 setTimeout 里延迟执行，也不能在 fetch 回调里直接调用。
- ✅ 正确：绑定在
button的onclick或addEventListener("click", ...)里 - ❌ 错误：在
componentDidMount/useEffect初始化时自动调用 - ❌ 错误：用
document.execCommand("copy")—— 已废弃，Chrome 95+ 默认禁用，且不支持跨域 iframe
兼容旧版 Chrome/Firefox，要不要 fallback 到 document.execCommand
现在基本不用了。Firefox 从 92+、Chrome 从 94+ 都已稳定支持 navigator.clipboard，Safari 13.1+ 也支持（需注意 Safari 对 writeText 的 Promise 拒绝行为更严格）。如果你的项目不需支持 2021 年前的浏览器，直接用现代 API 更干净。
如果真要兜底（例如企业内网还在用 IE11 或老版 Edge），得额外处理：document.execCommand 要求目标文本在 DOM 中可选（比如塞进 textarea 并 select()），而且必须 focus() 才能生效 —— 这会打断当前焦点，体验差，还可能被弹窗拦截器误拦。
立即学习“前端免费学习笔记（深入）”；
- 现代写法只需三行：获取元素 → 绑定 click → 调用
navigator.clipboard.writeText() - fallback 逻辑会让代码膨胀，还要处理
textarea创建/移除/隐藏/焦点管理 - 真正需要兼容 IE 的场景，建议用成熟库如
clipboard.js，而不是手写两套
复制失败时怎么给用户明确反馈？别只靠 catch 打 console
navigator.clipboard.writeText() 是 Promise，reject 原因不止权限问题：网络策略（如 CSP 的 clipboard-write 未声明）、空字符串、甚至某些安卓 WebView 的 bug 都会导致失败。用户看到“复制失败”比看到控制台报错有用得多。
常见错误类型和对应提示建议：
-
"NotAllowedError"→ 提示“请手动点击复制按钮再试一次”（说明需用户触发） -
"NotFoundError"或"SecurityError"→ 提示“当前环境不支持复制，请换 Chrome/Firefox/Safari 浏览器” -
"DataCloneError"→ 基本不会出现，但若传入对象而非字符串，应提前校验typeof text === "string"
实际操作中，建议加个视觉反馈：按钮文字临时变成“已复制”，2 秒后恢复，比弹 alert 更轻量。
复制长文本或富文本？writeText() 不行，得用 clipboard.write()
navigator.clipboard.writeText() 只能写纯文本。如果要复制带样式的 HTML（比如从编辑器里复制一段加粗文字），或者图片（如 canvas 导出的 blob），必须用底层的 navigator.clipboard.write()，它接收一个 ClipboardItem 数组。
但要注意：这个 API 兼容性更窄（Chrome 66+，Firefox 109+，Safari 16.4+），且 iOS Safari 完全不支持。更重要的是，它要求你手动构造 Promise<Blob>，比如把 HTML 字符串转成 new Blob([htmlStr], {type: "text/html"})。
- 纯文本复制：无脑用
writeText()，简单可靠 - HTML 复制：先检查
navigator.clipboard.write是否存在，再封装ClipboardItem，否则降级为纯文本 - 图片复制：需先有
Blob或ArrayBuffer，不能直接传<img src="..."/>字符串
多数业务场景下，“复制链接”“复制代码片段”“复制错误信息”都够用 writeText()；非要 HTML 富文本，得接受兼容性折损和实现复杂度上升。
