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），因此只建议作为最小兼容兜底，不推荐新项目主用。
立即学习“Java免费学习笔记（深入）”；
- 必须先将文本插入一个
<textarea></textarea>或<input>，设置readonly避免干扰用户输入 - 调用
.select()选中内容，再执行document.execCommand('copy') - 复制后应立即移除或重置该临时元素，避免影响布局或屏幕阅读器
- 某些安卓 WebView（如微信内置浏览器）对
execCommand支持极差，可能始终返回false
function fallbackCopyText(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
const success = document.execCommand('copy');
document.body.removeChild(textarea);
return success;
}
读取剪贴板内容需显式请求权限且受严格限制
navigator.clipboard.readText() 比写入更敏感，不仅需要安全上下文和用户手势，还要求页面已获得 'clipboard-read' 权限。浏览器通常不会自动授予，首次调用会弹出权限提示（类似摄像头请求）。
多数场景下，读取剪贴板不是刚需；若只是为了粘贴校验或快捷填充，建议改用监听 paste 事件更稳妥、更符合用户预期。
- 调用
readText()前可先用navigator.permissions.query({ name: 'clipboard-read' })检查当前状态（granted/denied/prompt） - 即使权限为
granted，某些浏览器（如 Safari）仍可能因隐私策略限制仅允许在粘贴事件中读取 - 不要在页面加载时自动读取——既无意义，也大概率被拦截
安全风险与常见陷阱
剪贴板是跨应用共享的数据通道，浏览器对其访问做了多层防护。开发者容易忽略的点不是“怎么写”，而是“为什么没写成”。
- 开发时用
http://localhost可以，但用http://127.0.0.1或文件协议（file://）会直接报SecurityError - Vue/React 中绑定在非原生事件（如自定义指令、computed setter）上的复制逻辑，往往脱离用户手势链，导致静默失败
- 在
iframe中操作父页面剪贴板？不行。跨 origin iframe 默认无权访问父级navigator.clipboard - 复制长文本（> 1MB）在部分浏览器（尤其是 iOS Safari）可能触发截断或拒绝，无明确报错，需自行分段或降级提示
navigator.clipboard.writeText()，捕获 NotAllowedError 后尝试 execCommand 降级，同时确保所有调用都扎根在真实的 click 或 keydown 回调里。其他花招，基本都绕不开这个前提。 
