现代浏览器推荐用 navigator.clipboard.writeText() 复制文本，但需 HTTPS/localhost 安全上下文且由用户交互触发；不支持富文本，移动端 Safari 13.4+ 才可用；降级可用 document.execCommand('copy')，需动态创建聚焦 textarea；readText() 兼容性更差，Safari 完全不支持。
怎样用 navigator.clipboard.writeText() 复制文本
现代浏览器推荐直接调用 navigator.clipboard.writeText()，它返回 Promise，支持异步错误捕获。但必须在**安全上下文（HTTPS 或 localhost）**中运行，且需用户交互触发（如点击事件），否则会抛出 NotAllowedError。
常见错误现象：在页面加载时自动执行、或在定时器里调用，会静默失败或报错 SecurityError: Clipboard API denied。
- 只接受字符串，传入对象或数组会转成
[object Object]或1,2,3，需手动JSON.stringify()或String() - 不支持复制富文本或 HTML 片段（如带样式的
<strong>文字</strong>），仅纯文本 - 移动端 Safari 13.4+ 才支持该 API；iOS 13.3 及更早版本完全不可用
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('Hello World');
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err.name); // 可能是 NotAllowedError / SecurityError / TypeError
}
});
如何降级到 document.execCommand('copy')
document.execCommand('copy') 是旧方案，兼容 IE11、Safari 12 及更早版本，但已被标记为废弃（deprecated），Chrome 90+ 在非用户手势下彻底禁用，Firefox 87+ 也限制严格。
关键限制：必须操作一个已选中的 <textarea></textarea> 或 <input> 元素，不能直接传字符串。
立即学习“Java免费学习笔记（深入）”；
- 需动态创建并聚焦
<textarea></textarea>，再调用select()和execCommand('copy') - 复制后记得移除临时元素，避免 DOM 泄漏
- 在 iOS Safari 中，
execCommand对contenteditable元素无效，只对表单控件有效 - Firefox 会要求用户手动允许剪贴板访问（弹提示），而 Chrome 不会
function fallbackCopy(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // 防止滚动影响
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
const success = document.execCommand('copy');
document.body.removeChild(textarea);
return success;
} catch (err) {
document.body.removeChild(textarea);
return false;
}
}
为什么 clipboard.readText() 更难用
读取剪贴板内容比写入更敏感，几乎所有浏览器都强制要求用户明确授权。即使调用 navigator.clipboard.readText()，也会在非用户手势（如点击）下直接拒绝，并抛出 NotAllowedError。
更麻烦的是：Safari 目前（截至 Safari 17）**完全不支持 readText()**，连实验性 flag 都没开放；Firefox 默认禁用，需用户在 about:config 中手动开启 dom.events.asyncClipboard.readText。
- 不能用于后台轮询或自动同步场景
- 无法检测剪贴板是否含图片、文件等非文本内容（API 不暴露 MIME 类型）
- Android WebView 中行为不一致：部分版本返回空字符串，部分直接 reject Promise
移动端和 WebView 的真实兼容边界
微信内置浏览器（X5 内核）、QQ 浏览器、抖音内嵌 WebView 等环境，基本不支持 navigator.clipboard，只能依赖 execCommand + <textarea></textarea> 方案。但它们对 focus() 和 select() 的触发条件更苛刻——比如某些安卓 WebView 要求 textarea 必须可见、有尺寸、且不在 display: none 容器中。
- 微信 iOS 版本 ≥ 8.0.36 才开始部分支持
clipboard.writeText，但仅限“公众号网页”且需绑定 JS-SDK 权限 - Android 微信 X5 内核仍普遍卡在 Chromium 75 左右，
clipboardAPI 不可用 - 所有 WebView 场景下，
document.hasFocus()常返回false，导致execCommand失败，需加setTimeout延迟执行
真正要覆盖全平台，得组合判断：先试 clipboard.writeText，失败再 fallback 到 execCommand，最后还要处理 WebView 的 focus 异常。别指望一个函数通吃。
