必须在原生click事件处理函数内同步调用navigator.clipboard.readText()，异步回调、await或框架代理事件均会脱离用户手势上下文导致NotAllowedError；Safari 16.4+且HTTPS下才支持。
不能直接在点击事件外调用 navigator.clipboard.readText()，否则会因权限拒绝或安全策略失败 —— 浏览器只允许在用户手势（如 click、keydown）触发的同步执行上下文中读取剪贴板。
为什么点击后调用 navigator.clipboard.readText() 还会报错？
常见错误是把读取逻辑放在异步回调里（比如 setTimeout、Promise.then 或事件委托的非直接 handler 中），导致脱离了“用户手势激活期”。浏览器会立刻拒绝并抛出 "NotAllowedError: Permission denied"。
- 必须在原生
click事件处理函数内部、同步调用navigator.clipboard.readText() - 不能包装成
async function后再用await延迟执行 ——await本身就会让执行流跳出当前同步上下文 - React/Vue 等框架中，确保绑定的是原生 DOM click，而非被抽象层延迟或代理后的事件
如何兼容 Safari 和旧版 Chrome？
Safari 直到 16.4 才支持 navigator.clipboard.readText()，且要求页面为 HTTPS；部分旧版 Chromium（document.execCommand('paste')（已废弃，且需 contenteditable 元素聚焦）。
- 优先检测
'clipboard' in navigator和navigator.clipboard?.readText是否可用 - 降级方案：创建临时
textarea并focus()，再用document.execCommand('paste')（仅限旧版，且需用户手动授权粘贴权限） - 更稳妥的降级是引导用户按
Ctrl+V，而非强行自动读取 —— 自动读取本身不是刚需，减少阻塞和权限弹窗更关键
读取后怎么安全填入输入框而不引发意外覆盖？
直接 input.value = text 可能打断用户正在编辑的内容，或与表单校验、受控组件状态冲突。
- 先检查目标
input是否有焦点（document.activeElement === input），否则不自动填充 - 避免覆盖非空输入框：仅当
input.value.trim() === ''时才写入 - 在 React 中，不要绕过 state 直接改
input.value，应通过setValue(text)触发受控更新 - 读取成功后可选地将光标移到末尾：
input.setSelectionRange(text.length, text.length)
真正难的不是调用那行代码，而是判断“此刻是否该读、该填、该提示、该放弃”——浏览器剪贴板 API 的限制本质是在逼你尊重用户意图，而不是替用户做决定。
