navigator.clipboard.writeText() 必须在用户可信点击事件中同步调用，否则抛 NotAllowedError；不支持时需 fallback 到 document.execCommand('copy') 并处理移动端兼容性、DOM 插入、选区和反馈。
必须在用户点击事件中同步调用 navigator.clipboard.writeText()，否则直接报错；不支持时 fallback 到 document.execCommand('copy') 配合临时 textarea，且要处理移动端 Safari 选区、DOM 插入位置和按钮反馈——这不是“加个 onclick 就行”的功能。
为什么 navigator.clipboard.writeText() 在点击后仍报 NotAllowedError
这个错误只说明一件事：调用上下文不是用户手势触发的“可信事件”。哪怕你绑了 click，也可能因以下原因失败：
- 函数不是直接在事件监听器里调用，而是包在
setTimeout、Promise.then()或 Vue 的onMounted里 - 页面运行在 HTTP（非 HTTPS/localhost）环境，浏览器直接拒绝权限请求
- 按钮是用
label包裹input[type="checkbox"]模拟的，实际触发的是change而非click，部分浏览器不认作可信源 - Safari 13.1 之前版本压根没实现该 API，连
navigator.clipboard都是undefined
验证方式很简单：console.log(event.isTrusted) 必须为 true；location.protocol 必须是 "https:" 或 "http:" 且 hostname 是 "localhost"。
fallback 到 document.execCommand('copy') 的关键实操点
这个废弃 API 还能用，但失败静默率高——不是“写了就能复制”，而是“写对了才可能复制成功”。常见翻车点：
立即学习“前端免费学习笔记（深入）”；
-
textarea没插入document.body，只设display: none或visibility: hidden，iOS 和部分安卓 WebView 直接跳过 - 没调用
textarea.focus()就执行select()，Safari 会选不全，只复制开头几个字符 - 没补
textarea.setSelectionRange(0, 999999)，移动端 Safari 13+ 仍可能截断 - 复制完忘记
removeChild()，导致 DOM 泄漏，多次点击后页面堆满隐藏节点
最小可靠写法：
function fallbackCopy(text) {
const ta = document.createElement('textarea');
ta.value = text.trim();
ta.style.position = 'fixed';
ta.style.left = '-9999px';
document.body.appendChild(ta);
ta.focus();
ta.select();
ta.setSelectionRange(0, 999999);
try {
return document.execCommand('copy');
} finally {
document.body.removeChild(ta);
}
}
按钮状态与用户反馈不能靠“感觉”
用户点下去没视觉变化，就会连点、刷新、怀疑 JS 崩了。这不是体验问题，是功能可用性底线：
- 点击后立即设
button.disabled = true，防止连点触发多个 Promise（哪怕只是瞬间） - 文案必须明确动作对象，比如“链接已复制”，而不是“已复制”——用户不知道复制了啥
- 恢复原始文案别用
setTimeout硬写毫秒数，推荐Promise.race([copyPromise, new Promise(r => setTimeout(r, 2000))])，确保失败也及时回退 - 失败时至少更新按钮
textContent并加aria-live="polite"，让屏幕阅读器可感知
别把 console.error 当解决方案——它解决不了用户“点了没反应”的困惑。
复制 URL 时容易被忽略的细节
直接抄 window.location.href 看似简单，但真实场景下常踩坑：
- 带
#section-1的 hash 不该被分享出去，多数平台不识别，应先url.split('#')[0] - 想加
?ref=share参数？别拼在href后硬塞，要用new URL(window.location.href)构造再 set，避免重复参数或编码错误 - 短链必须由后端生成，前端只能“复制预置值”；硬在 HTML 里写死
https://ex.co/abc可以，但别试图用 JS 实时生成短链 - 微信内打开的页面，
window.location.href可能带from=singlemessage这类干扰参数，建议白名单过滤
真正难的从来不是“怎么复制”，而是“怎么让用户确信它真的复制成功了，而且复制的是对的内容”。
