现代主流方式是使用 navigator.clipboard API，它比旧的 document.execCommand 更安全可靠，支持文本和二进制数据，但需安全上下文和用户手势触发。
JavaScript 实现复制到剪贴板，现代主流方式是使用 navigator.clipboard API，它比旧的 document.execCommand 更安全、更可靠，且支持文本和二进制数据（如图片）。但需注意权限与上下文限制。
使用 navigator.clipboard.writeText() 复制纯文本
这是最常用的方法，适用于复制字符串内容。调用前需确保页面处于安全上下文（HTTPS 或 localhost），且必须由用户手势（如 click、keydown）触发。
- 成功时返回 Promise.resolve()，失败则 reject 错误（如用户拒绝权限、不在用户操作中调用）
- 示例代码：
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
}
// 绑定到按钮点击
document.getElementById('copyBtn').addEventListener('click', () => {
copyToClipboard('Hello, Clipboard!');
});
使用 navigator.clipboard.readText() 读取剪贴板文本
允许网页主动读取用户剪贴板中的文本内容（同样需用户手势触发 + 安全上下文）。常用于粘贴功能或内容预览。
- 浏览器会弹出权限提示（首次使用时），用户可授权“仅在此网站”或“始终允许”
- 注意：部分浏览器（如 Safari）对 readText 支持较晚，建议检查兼容性或降级处理
复制 HTML 或富文本内容（需 write() 配合 ClipboardItem）
如果想复制带格式的 HTML（比如保留加粗、链接），不能只用 writeText，而要用 clipboard.write() 和 ClipboardItem。
立即学习“Java免费学习笔记（深入）”；
- 需构造 Blob 并指定 type（如 'text/html'、'text/plain'）
- 目前 Chrome、Edge 支持较好；Firefox 有限支持；Safari 暂不支持 ClipboardItem 写入
- 示例（复制 HTML 片段）：
async function copyHtml(htmlString) {
const htmlBlob = new Blob([htmlString], { type: 'text/html' });
const plainBlob = new Blob(['Plain version'], { type: 'text/plain' });
try {
await navigator.clipboard.write([
new ClipboardItem({
'text/html': htmlBlob,
'text/plain': plainBlob
})
]);
} catch (err) {
console.error('HTML 复制失败:', err);
}
}
兼容旧浏览器的降级方案（execCommand）
对于仍需支持 IE11 或老版本 Safari 的场景，可 fallback 到 document.execCommand('copy')，但该方法已被废弃，且要求 input/textarea 聚焦并选中内容。
- 需临时创建并隐藏 textarea，填入内容，select() 后执行 execCommand
- 无法在无焦点或非用户手势上下文中使用（现代浏览器已限制）
- 仅推荐作为渐进增强的兜底，不建议新项目主用
