现代浏览器推荐用 navigator.clipboard.writeText() 写入文本，需 HTTPS/localhost 安全上下文、用户手势触发并 await 处理异常；不支持时降级 document.execCommand('copy')，需创建临时 textarea 并手动选中；判断 API 有效性应检测 writeText 是否为函数、安全上下文及运行时试探；读取剪贴板兼容性差，建议仅写入+用户手动粘贴。
使用 navigator.clipboard.writeText() 写入文本最简单
现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+）原生支持 navigator.clipboard.writeText()，调用后会触发权限请求（仅在安全上下文 HTTPS 或 localhost 下生效）。
常见错误是直接调用却没处理拒绝权限或抛出异常：
- 用户点击前未触发用户手势（如
click、keydown），会报SecurityError: Permission denied - 在非安全上下文（HTTP）下调用，
navigator.clipboard为undefined - 未
await或捕获Promise拒绝，导致静默失败
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('复制成功');
console.log('已写入剪贴板');
} catch (err) {
console.error('复制失败:', err.name); // 可能是 'SecurityError' 或 'NotAllowedError'
}
});
降级到 document.execCommand('copy') 需手动创建临时元素
IE11 和旧版 Safari 不支持 navigator.clipboard，必须回退到 document.execCommand('copy')。但它要求操作的是已渲染、可选中的 DOM 元素，不能直接传字符串。
关键步骤和易错点：
立即学习“Java免费学习笔记（深入）”；
- 必须将内容插入一个
<textarea>或<input>，并设为position: absolute; left: -9999px避免视觉干扰 - 元素需已添加到
document.body才能被选中 - 调用
select()后立即执行execCommand，否则可能因异步渲染失败 -
execCommand已废弃，但目前仍是唯一兼容 IE 的方案
function fallbackCopy(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
try {
const success = document.execCommand('copy');
document.body.removeChild(textarea);
return success;
} catch (err) {
document.body.removeChild(textarea);
return false;
}
}
如何判断该用哪个 API？别只查 navigator.clipboard 是否存在
仅检测 navigator.clipboard 存在与否不够——Safari 13.0 支持该属性但不支持 writeText()；某些 Android WebView 有 clipboard 但方法不可用。
更稳妥的判断逻辑：
- 先检查
navigator.clipboard?.writeText是否为函数 - 再确保当前是安全上下文：
location.protocol === 'https:' || location.hostname === 'localhost' - 最后加一层运行时试探：用
try/catch尝试调用一次空字符串，捕获早期拒绝
不要在页面加载时就预判，而应在用户交互触发时实时判断并选择路径。
读取剪贴板内容需额外权限且限制更多
navigator.clipboard.readText() 比写入更敏感，Chrome/Firefox 要求显式声明 clipboard-read 权限（通过 Permissions API），且仅允许在用户手势后调用。
兼容性更差：Safari 目前完全不支持 readText()；IE 不支持任何读取方式；部分移动端 WebView 会静默失败。
如果业务必须读取，只能接受降级为提示用户手动粘贴（prompt 或输入框引导），而非自动获取。
真正跨端稳定的剪贴板操作，只可靠写入 + 用户主动粘贴配合，别指望自动读取能覆盖所有场景。
