最直接方式是在 click 事件中调用 navigator.clipboard.writeText()，需确保用户手势触发、HTTPS/localhost 环境、处理 Promise 拒绝，并降级 fallback。
click 事件里调用 navigator.clipboard.writeText() 是最直接方式
现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+）已原生支持 navigator.clipboard API，无需第三方库。它比旧的 document.execCommand('copy') 更可靠、更安全，且不依赖 contenteditable 或临时 <textarea> 聚焦。
关键前提是：该操作必须由用户手势（如 click、keydown）触发，不能在异步回调（如 setTimeout、fetch.then）中直接调用，否则会抛出 "NotAllowedError: Write permission denied"。
- 按钮绑定
onclick或addEventListener('click', ...)，确保上下文是用户激活的 - 函数体内直接调用
navigator.clipboard.writeText('要复制的内容') - 必须处理 Promise 拒绝：用户可能拒绝权限，或页面不在活跃标签页中
为什么 document.execCommand('copy') 现在不推荐
这个老方法依赖创建并聚焦一个隐藏 <textarea>，再执行命令。它在 Safari 13.1+ 和部分移动端 Chrome 中已被禁用；即使可用，也容易因焦点丢失、样式干扰或 Shadow DOM 隔离而失败。
navigator.clipboard 是标准 API，语义清晰，权限模型明确（仅限安全上下文，即 HTTPS 或 localhost），且返回可 await 的 Promise，便于链式错误处理。
立即学习“前端免费学习笔记（深入）”；
- 非 HTTPS 页面（如
http://example.com）调用navigator.clipboard会静默失败或抛出"SecurityError" - 测试时务必用
http://localhost或真实 HTTPS 环境，file://协议不被支持 - 某些企业环境或浏览器策略（如 Chrome 的
--unsafely-treat-insecure-origin-as-secure）会影响行为，但不应作为生产方案
如何安全处理权限与降级逻辑
不是所有用户都会授权剪贴板写入权限，尤其首次调用时浏览器会弹出提示。不能假设 writeText() 一定成功，也不能把失败当作“没反应”忽略。
建议显式检查权限状态，并为失败提供 fallback 提示（比如选中文本手动复制）：
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('Hello World');
console.log('复制成功');
} catch (err) {
if (err.name === 'NotAllowedError') {
// 用户点击了“禁止”或未触发手势
alert('请手动选择文本并按 Ctrl+C 复制');
} else if (err.name === 'NotFoundError') {
// 浏览器不支持 clipboard API
fallbackCopyText('Hello World');
}
}
});
-
navigator.permissions.query({ name: 'clipboard-write' })可提前探测权限状态，但多数场景下直接调用 +catch更简洁 - fallback 方案可用
document.execCommand（仅作兜底，不主动启用）或纯提示，避免引入额外 DOM 操作和样式风险 - 移动端 Safari 对
writeText支持良好，但若页面被置于后台（如用户切到其他 App），Promise 会 reject，需在catch中覆盖该情况
常见报错及对应修复点
实际开发中最常遇到三类错误信息，每种都对应明确的修复路径：
-
"NotAllowedError: Write permission denied"→ 检查是否在用户 click 回调内同步调用；确认没有包裹在setTimeout、Promise.then或事件委托的异步分支中 -
"SecurityError: Clipboard API denied"→ 页面非 HTTPS 且非localhost；改用本地服务器启动（如npx serve）或部署到 HTTPS 域名 -
"TypeError: navigator.clipboard is undefined"→ 浏览器版本过低（如 IE、旧版 Safari）；需加if ('clipboard' in navigator)判断，再进入主逻辑
真正棘手的不是 API 调用本身，而是对“用户手势上下文”的理解偏差——很多 bug 来自把复制逻辑塞进了防抖函数、请求回调或状态更新钩子中，结果失去了原始事件关联性。
