HTML中触发剪贴板写入权限请求必须在用户手势（如click）回调中调用navigator.clipboard.writeText()，否则静默失败；需HTTPS或localhost环境，旧浏览器降级用document.execCommand('copy')并确保textarea已挂载、聚焦、选中。
HTML 中如何触发剪贴板写入权限请求
浏览器不会主动弹出“允许写入剪贴板”提示框，navigator.clipboard.writeText() 调用本身就会触发权限请求——但仅限于用户手势（如 click、keydown）上下文中。脱离这个上下文，调用直接失败，且不抛错误，只静默拒绝。
- 必须在用户触发的事件回调里调用，比如
button.addEventListener('click', () => navigator.clipboard.writeText('xxx')) - 不能放在
setTimeout、fetch回调、DOMContentLoaded里——哪怕只延迟 0ms，也会被判定为非即时手势 - 移动端 Safari 对手势要求更严：长按、双击等非标准点击可能不被识别为有效手势
为什么 navigator.clipboard.writeText() 报错 “Permission denied”
这个错误通常不是权限没点“允许”，而是调用时机或环境不合法。Chrome 和 Edge 在无手势上下文下调用会直接 reject Promise 并报 NotAllowedError: Write permission denied；Firefox 则可能返回 SecurityError。
- 检查是否在
async函数里忘了await，导致后续逻辑误判为同步失败 - 确认页面协议是
https://或http://localhost——非安全上下文下navigator.clipboard是undefined - 某些企业内网环境或老版本 Edge（≤109）会禁用该 API，需降级到
document.execCommand('copy')（仅支持文本，且需textarea插入 DOM）
兼容旧浏览器的降级写法怎么写才不翻车
用 document.execCommand('copy') 不是简单备选，它有严格 DOM 要求：目标元素必须在文档中、可见、可聚焦、且选中内容后才能执行复制。
- 临时
textarea必须插入到document.body，不能只创建不挂载 - 要设置
readonly属性并调用.focus()，否则 Safari 可能忽略选中 - 复制完立刻
remove()，避免残留 DOM 节点或焦点干扰 - 示例关键片段：
const ta = document.createElement('textarea');<br>ta.value = 'text';<br>ta.readOnly = true;<br>document.body.appendChild(ta);<br>ta.select();<br>ta.focus();<br>document.execCommand('copy');<br>document.body.removeChild(ta);
权限状态能提前检测吗？navigator.permissions.query() 的坑
可以查，但结果不可靠。navigator.permissions.query({name: 'clipboard-write'}) 在 Chrome 中返回 state: "prompt" 并不表示下次调用就一定弹窗——它只反映当前策略，实际弹窗仍取决于调用是否在手势中。
立即学习“前端免费学习笔记（深入）”；
- Firefox 不支持
clipboard-write查询，会直接 throwTypeError - 即使查到
state: "granted"，也不能跳过手势检查——权限可能被用户手动关闭，或页面刷新后重置 - 真正可靠的判断方式只有：捕获
navigator.clipboard.writeText()的 Promise rejection，并根据error.name区分是NotAllowedError（手势问题）还是SecurityError（协议/环境问题）
最易被忽略的一点：iOS Safari 直到 16.4 才完整支持 navigator.clipboard.writeText()，更早版本只能走 execCommand 降级，且需额外处理软键盘弹起导致的 textarea 失焦问题。
