最推荐使用 navigator.clipboard.writeText() 实现复制，需在用户触发事件中调用且页面为 HTTPS 或 localhost；不支持时可降级至 document.execCommand('copy') 配合临时 textarea。
JavaScript 中用 BOM 实现复制文本到剪贴板，最推荐的方式是使用 navigator.clipboard.writeText() —— 这是现代浏览器原生支持的异步 API，安全、简洁、无需依赖 DOM 元素。
使用 navigator.clipboard.writeText()（推荐）
这是当前标准做法，需注意两点：必须在用户触发的事件（如 click）中调用；页面需为 HTTPS 或 localhost（部分浏览器对非安全上下文限制写入）。
- 基本用法：
<button id="copyBtn">复制文本</button>
<script>
document.getElementById('copyBtn').addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('Hello, world!');
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
});
</script>
立即学习“Java免费学习笔记（深入）”；
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 支持复制任意字符串，包括换行符、制表符等；
- 返回 Promise，可 await 或用 .then() 处理；
- 失败常见原因：未在用户手势中调用、页面非安全上下文、浏览器不支持（IE 完全不支持，Safari 13.1+ 支持）。
兼容旧浏览器的 fallback 方案（document.execCommand）
对于需支持 IE 或老版本 Safari 的场景，可降级使用 document.execCommand('copy')，但需借助临时 input/textarea 元素。
- 步骤：创建临时元素 → 设置值 → 选中内容 → 执行 copy → 清理 DOM；
- 必须同步执行，且元素需在 document 中、可见、可聚焦；
- 示例代码：
function fallbackCopy(text) {
const input = document.createElement('textarea');
input.value = text;
input.style.position = 'fixed';
input.style.left = '-9999px';
document.body.appendChild(input);
input.focus();
input.select();
try {
document.execCommand('copy');
return true;
} catch {
return false;
} finally {
document.body.removeChild(input);
}
}
封装一个兼顾兼容性与简洁性的函数
把两种方式组合，优先用新 API，失败时自动降级：
async function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
try {
await navigator.clipboard.writeText(text);
return true;
} catch (e) {
// 降级
}
}
return fallbackCopy(text);
}
- 调用：
copyToClipboard('复制的内容').then(success => {...})； - 注意：Safari 在非 HTTPS 页面会静默拒绝
navigator.clipboard，此时自动走 fallback； - 移动端同样适用（iOS Safari 13.4+ 支持 writeText）。
注意事项与常见问题
- 权限与上下文：Chrome/Firefox/Safari 要求操作由用户手势（click/tap）触发，不能在 setTimeout 或 fetch 回调中直接调用；
-
安全性限制：非 HTTPS 页面在 Chrome 中无法使用
navigator.clipboard（localhost 除外）； - 移动端适配：部分安卓 WebView 对 execCommand 支持不佳，建议优先测试 writeText；
- 错误提示：捕获异常后建议给用户明确反馈，例如弹出“复制成功” Toast，而非仅 console.log。
