JavaScript复制功能实现与兼容方案
2026-01-26 09:05:30
0浏览
收藏
一分耕耘，一分收获！既然打开了这篇文章《JavaScript复制功能实现及兼容性解析》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！
现代浏览器推荐用 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 片段（如带样式的
文字），仅纯文本 - 移动端 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+ 也限制严格。
关键限制：必须操作一个已选中的