navigator.clipboard.writetext() 是现代浏览器唯一推荐的复制方法，但需 https 环境与用户手势触发；旧版 safari 或 http 页面须降级为 document.execcommand("copy") 并注意 textarea 插入位置、选中范围等细节。
现代浏览器下，navigator.clipboard.writeText() 是唯一推荐的实现方式；旧版 Safari 或 HTTP 页面必须降级处理，否则按钮点击后毫无反应。
为什么直接调用 navigator.clipboard.writeText() 会失败
它不是“写错代码”的问题，而是浏览器强制限制：必须同时满足两个条件——页面运行在 HTTPS（或 localhost）下，且调用发生在用户显式手势中（如 click、keydown）。常见踩坑点：
- 把复制逻辑塞进
setTimeout或fetch回调里，触发时已脱离用户交互上下文，直接报NotAllowedError: Write permission denied - 在 HTTP 页面（比如本地双击打开的
file://或未配 SSL 的测试域名）上调用，会静默失败或抛SecurityError - 在 Safari 12 及更早版本中，
navigator.clipboard根本不存在，typeof navigator.clipboard === 'undefined'
navigator.clipboard.writeText() 的最小可用写法
不加判断、不包 Promise、不设 fallback 的纯现代写法，仅适用于已确认环境安全且目标浏览器 ≥ Safari 13.1：
<button id="copyBtn">复制链接</button>
<script>
document.getElementById("copyBtn").addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(window.location.href);
} catch (err) {
// 至少别让失败无声无息
alert("复制失败，请手动复制");
}
});
</script>
注意：async/await 不可省略，因为 writeText() 返回 Promise；catch 不能空着，否则用户完全不知道发生了什么。
兼容 Safari 12 / iOS 12 的降级方案
当 navigator.clipboard 不可用，或页面非安全上下文时，退回基于 textarea 的 document.execCommand("copy")。关键细节：
- 临时
textarea必须插入document.body，否则在 Shadow DOM 或某些框架（如 Vue 3 +createApp挂载到非body元素）中会失效 -
ta.select()后必须紧跟ta.setSelectionRange(0, 999999)，否则 iOS Safari 会只选中首字符 - 不要用
contenteditable或input元素模拟，它们在部分 Android WebView 中不可靠 - 降级函数应返回
Promise<boolean></boolean>，与主流程保持接口一致，方便统一处理结果
按钮状态与用户反馈不能靠“感”
复制是瞬时操作，但网络延迟、权限弹窗、异步等待都会造成感知断层。实际项目中容易被忽略的三点：
- 点击后立即禁用按钮并改文案（如“已复制”），防止重复点击；3 秒后自动恢复，避免用户误以为卡死
- 不要只依赖
console.log，失败时至少用alert或轻量 toast 提示，否则用户会反复点、怀疑功能坏了 - 若页面含多个复制按钮（如每条列表项一个），务必为每个绑定独立事件监听器，避免
event.target错位或复用同一textarea导致内容错乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
