现代浏览器中需在用户点击事件内同步调用 navigator.clipboard.writeText()，HTTPS 环境下有效；需检测 API 存在性、捕获 NotAllowedError 并降级至 execCommand，同时添加按钮禁用与状态反馈。
点击按钮触发 navigator.clipboard.writeText() 的基本写法
现代浏览器中，直接调用 navigator.clipboard.writeText() 是最干净的复制方式，但必须在用户手势（如 click）回调内执行，否则会被拒绝。不能在异步回调（比如 setTimeout 或 fetch.then）里调用，否则抛出 "Permission denied" 错误。
实操建议：
- 绑定
click事件到<button></button>，在事件处理函数中立即调用navigator.clipboard.writeText() - 确保页面已通过 HTTPS 提供（
localhost除外），否则navigator.clipboard为undefined - 不要用
async/await包裹后丢进setTimeout——这会脱离用户手势上下文
document.querySelector('button').addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('Hello, world!');
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
});
处理 clipboard.writeText() 拒绝或失败的常见原因
即使在 click 回调里调用，仍可能失败。典型错误包括："NotAllowedError"（权限被拒）、"TypeError: Cannot read property 'writeText' of undefined"（API 不可用）、"SecurityError"（非安全上下文）。
实操建议：
- 先检查
navigator.clipboard是否存在，再调用 —— 尤其要兼容 Safari 13.1+ 和旧版 Edge - 捕获
NotAllowedError并提示用户“请手动复制”或 fallback 到document.execCommand('copy')（仅限旧版） - 避免在 Vue/React 的合成事件中直接 await，某些版本会丢失上下文；可改用原生
addEventListener绑定
按钮状态反馈与防重复点击的必要性
复制是瞬时操作，用户无法感知是否成功。不加反馈容易导致反复点击，而 writeText() 是 Promise，连续调用不会自动排队，可能因竞态导致失败或 UI 错乱。
实操建议：
- 点击后立即将按钮设为
disabled，并修改文案（如从“复制”变为“已复制”） - 用
setTimeout恢复按钮状态（通常 2s 足够），不要依赖 Promise resolve 时间 —— 成功回调可能快于渲染 - 若需支持多次复制不同内容，每次点击前重置状态，而非全局锁死按钮
const btn = document.querySelector('button');
btn.addEventListener('click', async () => {
btn.disabled = true;
btn.textContent = '已复制';
try {
await navigator.clipboard.writeText(btn.dataset.text || '');
} finally {
setTimeout(() => {
btn.disabled = false;
btn.textContent = '复制';
}, 2000);
}
});
兼容旧浏览器时 fallback 到 document.execCommand('copy')
document.execCommand('copy') 已废弃，但在 Safari
实操建议：
- 只在
navigator.clipboard不可用时启用 fallback，优先走新 API - 创建临时
<textarea></textarea>插入 body，设置value、select()，再执行execCommand - 操作完立刻移除
<textarea></textarea>，避免影响样式或焦点管理 - 注意：Safari 对
execCommand的支持不稳定，部分版本需先 focus 再 select
debounce，也可能让浏览器判定为非直接响应，从而拒绝访问剪贴板。别省掉那行 if (!navigator.clipboard) 检查。 
