JS复制文本到剪切板技巧
2026-03-16 19:53:32
0浏览
收藏
本文详解了现代 JavaScript 中安全、高效复制文本到剪切板的核心方法——`navigator.clipboard.writeText()`，强调其需在 HTTPS 或 localhost 安全上下文下运行，并必须由用户手势（如点击）触发，同时兼容主流浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+），彻底取代了过时且不安全的 `document.execCommand` 和 Flash 方案；文中还提供了简洁可靠的异步调用示例及错误处理逻辑，并简要提及旧版浏览器的降级思路，是前端开发者实现剪切板功能的权威实践指南。
JavaScript 可以通过 navigator.clipboard API 实现剪切板的复制操作，这是现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+）原生支持的标准方式，安全、简洁、无需依赖 Flash 或 document.execCommand。
使用 navigator.clipboard.writeText() 复制文本
这是最常用、推荐的方式。它返回一个 Promise，成功时无返回值，失败时抛出错误。
- 确保页面是安全上下文（即通过 https:// 或 localhost 访问），否则 API 不可用
- 必须由用户手势（如点击、键盘事件）触发，不能在页面加载或定时器中直接调用，否则会被浏览器拒绝
- 示例代码：
document.getElementById('copyBtn').addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('Hello, world!');
console.log('文本已复制到剪切板');
} catch (err) {
console.error('复制失败:', err);
}
});
兼容旧版浏览器（可选降级方案）
若需支持较老版本 Chrome/Firefox（document.execCommand('copy')，但该方法已废弃，且限制更多：
- 需将文本放入