最推荐使用 navigator.clipboard.writeText() API 实现点击复制,需用户手势触发、返回 Promise、支持现代浏览器;动态内容需先读取再传入,旧浏览器可降级用 execCommand。

JavaScript 实现点击复制文本到剪贴板,最推荐使用原生的 navigator.clipboard.writeText() API,它简洁、安全、兼容性良好(现代浏览器基本都支持),无需依赖第三方库或过时的 document.execCommand()。
✅ 基础用法:一行核心代码
复制操作只需调用 navigator.clipboard.writeText(str),它返回一个 Promise:
- 成功时 resolve,表示文本已写入系统剪贴板;
- 失败时 reject(比如用户拒绝权限、页面非安全上下文(非 HTTPS 或本地 file://)、或调用不在用户手势触发内)。
示例:
<button id="copyBtn">复制文本</button><script>
document.getElementById('copyBtn').addEventListener('click', () => {
navigator.clipboard.writeText('Hello, clipboard!')
.then(() => console.log('复制成功'))
.catch(err => console.error('复制失败:', err));
});
</script>
⚠️ 注意事项:必须由用户手势触发
该 API 只能在用户明确交互(如 click、tap、keydown)的回调中调用,不能在定时器、异步加载完成、或页面初始化时直接调用,否则会报错 "Permission denied" 或静默失败。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记(深入)”;
- ✅ 正确:绑定在
button.onclick、input.onchange等事件里; - ❌ 错误:放在
setTimeout(() => { ... }, 100)或fetch().then(...)中直接调用。
? 复制动态内容(如输入框值、元素文本)
常见需求是复制某个 input 的值或某段 DOM 文本,只需先读取再传入:
- 复制输入框:
navigator.clipboard.writeText(input.value); - 复制元素文字:
navigator.clipboard.writeText(element.textContent.trim()); - 复制 HTML(需额外处理):API 不支持直接写 HTML,如需富文本可改用
clipboard.write()(较复杂,一般场景不推荐)。
?️ 兼容性与降级方案(可选)
如果需支持旧版 Safari(≤13.1)或 IE,可检测 API 是否可用,并 fallback 到 document.execCommand('copy')(已废弃但仍有兼容价值):
- 检查
navigator.clipboard是否存在; - 若不存在,创建临时
<textarea>,设为readonly并聚焦,再执行execCommand('copy'); - 注意:此方式在 iOS Safari 和新版 Chrome 中可能受限,仅作兜底,不建议主用。

















