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