必须用 navigator.clipboard.writeText() 实现复制，需在用户手势触发的 async 函数中调用并 try/catch；不支持时降级为 execCommand('copy') 配合隐藏 textarea；需提供成功/失败反馈且禁用按钮防连点。
点击按钮复制文本内容必须用 navigator.clipboard.writeText()
HTML5 原生支持复制操作，但不能直接操作剪贴板，必须通过 navigator.clipboard.writeText() 异步写入。这个 API 要求页面处于安全上下文（https 或 localhost），且调用必须由用户手势（如 click、keydown）触发——否则会抛出 "NotAllowedError"。
常见错误是试图在非用户事件回调中调用，比如 setTimeout 延迟执行、或在 fetch 成功后自动复制，这些都会失败。
- 必须绑定在
click或input等明确的用户交互事件上 - 函数需声明为
async，因为writeText()返回 Promise - 务必加
try/catch捕获拒绝情况，例如用户拒权或浏览器不支持
兼容性差的旧浏览器要降级用 document.execCommand('copy')
Firefox 63+、Chrome 66+、Edge 79+ 支持 navigator.clipboard；Safari 直到 13.1 才完整支持 writeText()，更早版本只能靠 document.execCommand('copy') 配合 textarea 临时选中实现。
降级逻辑核心是：创建隐藏 textarea → 设置 value → select() → 调用 execCommand('copy') → 移除节点。
立即学习“前端免费学习笔记（深入）”；
-
execCommand已废弃，但仍是 Safari 13.0 及部分安卓 WebView 的唯一可行方案 - 必须将
textarea插入document.body才能被选中，仅设置display: none不够，要用position: absolute; left: -9999px - IE11 完全不支持
navigator.clipboard，也只认execCommand
复制按钮需要反馈状态，否则用户不知道是否成功
复制是异步操作，没有视觉反馈极易造成重复点击或误判失败。不能只依赖 alert()，应更新按钮文案或添加短暂 tooltip。
- 成功后立即将按钮文字改为
"已复制"，2 秒后恢复原文字 - 失败时显示简短提示，如
"复制失败，请重试"，避免暴露权限细节（如“拒绝访问剪贴板”可能引发用户困惑） - 禁用按钮 2 秒可防连点，但注意：若用户快速连点两次，第二次仍会进入 pending 状态，需在 Promise 外层加节流控制
完整可运行示例（含现代 API + execCommand 降级）
function copyText(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
}
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand('copy');
} finally {
document.body.removeChild(textarea);
}
}
document.getElementById('copyBtn').addEventListener('click', async () => {
const btn = document.getElementById('copyBtn');
const originalText = btn.textContent;
try {
await copyText('Hello, world!');
btn.textContent = '已复制';
setTimeout(() => { btn.textContent = originalText; }, 2000);
} catch (err) {
btn.textContent = '复制失败';
setTimeout(() => { btn.textContent = originalText; }, 2000);
}
});
真正容易被忽略的是：iOS Safari 在某些 WKWebView 场景下即使调用成功，也可能因系统限制实际未写入剪贴板；测试时务必真机验证，不能只看 Promise 是否 resolve。
