JavaScript安全复制文本到剪贴板的方法
2026-01-22 18:03:33
0浏览
收藏
“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript如何安全复制文本到剪贴板》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！
navigator.clipboard.writeText()是现代浏览器复制文本的首选方案，需在安全上下文和用户手势中调用，失败时可降级至document.execCommand('copy')。
使用 navigator.clipboard.writeText() 复制文本是最直接的方式
现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+）支持 navigator.clipboard API，它比旧的 document.execCommand('copy') 更可靠、更安全，且无需聚焦输入框或创建临时 DOM 元素。
但必须注意：该 API 只在安全上下文（https:// 或 localhost）中可用，且调用必须由用户手势（如 click、keydown）触发，否则会抛出 "Permission denied" 错误。
- 直接调用
navigator.clipboard.writeText('hello')会返回一个 Promise，成功则 resolve，失败则 reject - 不能在定时器、网络回调或异步任务中“悄悄”调用——哪怕只是延迟 1ms 的
setTimeout，也会被浏览器拒绝 - 若页面未获得焦点（例如后台标签页），部分浏览器（如 Safari）可能静默失败，不抛错也不复制
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('复制成功的内容');
console.log('已写入剪贴板');
} catch (err) {
console.error('复制失败:', err.name, err.message);
// 常见错误：NotAllowedError（非用户手势）、SecurityError（非安全上下文）
}
});
兼容老浏览器需降级到 document.execCommand('copy')
IE11 和部分旧版移动端浏览器不支持 navigator.clipboard，此时可回退到基于 execCommand 的方案。但它要求目标文本必须出现在可选中的 DOM 节点中，且该节点需处于 focus 状态。
这个方法已被标记为废弃（deprecated），且在 Chrome 94+ 中默认禁用（除非启用实验性 flag），因此只建议作为最小兼容兜底，不推荐新项目主用。
- 必须先将文本插入一个