现代浏览器推荐使用navigator.clipboard.writeText()复制文本，需HTTPS/localhost安全上下文及用户手势触发；不支持时降级至document.execCommand('copy')，通过临时textarea实现兼容。
用 navigator.clipboard.writeText() 最直接
现代浏览器都支持这个 API，调用它就能把字符串写进系统剪贴板。注意它必须在用户手势触发的上下文中执行（比如 click、keydown），否则会被拒绝。
常见错误是直接在页面加载时调用，或在异步回调里没绑定到用户动作上，会报 "navigator.clipboard is not available" or "Permission denied"。
- 确保绑定在
button或span的onclick事件里 - 不要在
setTimeout或fetch.then()里直接调用，除非该 Promise 是由点击触发的 - 需要 HTTPS 环境（localhost 除外）才能启用
clipboard权限
兼容旧版浏览器得 fallback 到 document.execCommand('copy')
IE11 和部分老版 Chrome/Safari 不支持 navigator.clipboard，得用已废弃但实操还管用的 document.execCommand('copy')。它要求把目标文字塞进一个 textarea 并选中，再执行复制。
容易踩的坑是：元素没加 style="position: absolute; left: -9999px;" 导致页面闪动；或者没调用 select() 就直接 execCommand，结果复制了空内容。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 创建临时
textarea，设readonly防止 iOS 键盘弹出 - 用
textarea.value = text赋值，再textarea.select() - 调用前确保
textarea已挂载到 DOM（哪怕只是document.body.appendChild()）
按钮文案和反馈要即时，别让用户猜成功没
复制操作无视觉反馈，用户点完没反应就会反复点。不能只靠 console.log，得改按钮文字或加 tooltip。
典型错误是“复制成功”提示停留太久，或没还原状态，导致用户以为还能再点一次（其实可以，但体验差）。
- 点击后立即将按钮文本改为
"已复制"，2 秒后自动切回"复制" - 避免用
alert()，打断操作流 - 对屏幕阅读器友好：用
aria-live="polite"区域动态更新状态
clipboard-write 权限不是永久的，别假设它一直有效
Chrome 从 95+ 开始，即使用户点过一次授权，刷新页面后仍需重新触发手势才能调用 writeText()。这不是 bug，是安全策略。
所以不要在组件初始化时预请求权限（navigator.permissions.query({name:'clipboard-write'}) 没用），也不用存状态判断“是否已授权”——每次点击都得走完整流程。
- 所有复制逻辑必须包裹在 click handler 内部，不提前执行
- 捕获
clipboard.writeText()的 reject，降级到 execCommand 流程 - 移动端 Safari 对
textarea.select()支持不稳定，建议优先用clipboard+ try/catch
