推荐用 navigator.clipboard.writeText() 实现复制，需 HTTPS 和用户交互触发；不支持时降级为 document.execCommand('copy')，通过临时 textarea 选中复制；封装函数应优先检测新 API 并统一返回 Promise。
JavaScript 实现复制到剪贴板，现代浏览器推荐用 navigator.clipboard.writeText()，它简洁、安全、支持异步；但需 HTTPS 环境且用户交互触发（如点击事件中调用）。老版本浏览器（如 IE11 或旧版 Safari）不支持该 API，需降级使用 document.execCommand('copy') 方案。兼容处理的关键是：先尝试新 API，失败则回退到传统方法，并注意 DOM 元素聚焦与选中逻辑。
使用 navigator.clipboard.writeText（推荐，现代浏览器）
这是当前标准方案，返回 Promise，可捕获成功或失败：
- 必须在安全上下文（HTTPS 或 localhost）中运行
- 必须由用户手势（如
click、keydown）触发，不能在定时器或异步回调中直接调用 - 无需创建临时元素，代码干净
示例：
async function copyToClipboard(text) {<br>
try {<br>
await navigator.clipboard.writeText(text);<br>
console.log('复制成功');<br>
} catch (err) {<br>
console.error('复制失败:', err);<br>
}<br>
}
降级：document.execCommand('copy')（兼容 IE11、旧 Safari）
该方法已废弃但广泛支持，需手动创建并选中一个临时 <textarea> 或 <input> 元素：
立即学习“Java免费学习笔记（深入）”；
- 将文本写入隐藏的
<textarea>，设置readonly避免 iOS 键盘弹出 - 调用
.select()（注意：Firefox 中需先.focus()才能选中） - 执行
document.execCommand('copy')，返回布尔值表示是否成功 - 操作完成后及时移除临时元素
示例片段：
function fallbackCopyText(text) {<br>
const textarea = document.createElement('textarea');<br>
textarea.value = text;<br>
textarea.style.position = 'fixed';<br>
textarea.style.left = '-9999px';<br>
textarea.readOnly = true;<br>
document.body.appendChild(textarea);<br>
textarea.focus();<br>
textarea.select();<br>
try {<br>
const success = document.execCommand('copy');<br>
if (success) console.log('复制成功');<br>
} catch (err) {<br>
console.error('execCommand 失败:', err);<br>
} finally {<br>
document.body.removeChild(textarea);<br>
}<br>
}
封装一个兼容性函数
把两种方式组合起来，自动判断环境并降级：
- 优先检测
navigator.clipboard?.writeText是否可用 - 不可用时走
execCommand路径 - 对 iOS Safari 做小优化：避免
textarea获取焦点时唤起键盘（加readonly+user-select: none） - 统一返回 Promise，便于调用方统一处理
简单封装示意：
function copy(text) {<br>
if (navigator.clipboard && window.isSecureContext) {<br>
return navigator.clipboard.writeText(text);<br>
}<br>
return new Promise((resolve, reject) => {<br>
fallbackCopyText(text);<br>
resolve(); // execCommand 无标准错误反馈，按成功处理<br>
});<br>
}
注意事项与常见问题
实际使用中容易踩坑的地方：
-
HTTPS 限制：Chrome/Firefox/Safari 在非安全上下文中禁用
navigator.clipboard，开发时可用localhost绕过 -
iOS Safari 兼容性：iOS 13.4+ 支持
writeText，但早期版本只能靠execCommand；注意其对textarea的聚焦行为更敏感 -
权限提示：部分浏览器（如 Chrome）首次调用
writeText可能触发权限请求（仅限粘贴时），复制一般无需授权 - 中文/特殊字符：两种方法都支持 UTF-8 字符串，无需额外编码
