应优先使用navigator.clipboard.writeText()，但必须在HTTPS或localhost安全上下文中由用户手势触发；若不满足则降级至document.execCommand('copy')，需创建临时textarea并严格按选中→执行→移除顺序操作，同时管理按钮状态与用户反馈。
直接调用 navigator.clipboard.writeText() 即可复制文本，但需注意权限、安全上下文和错误处理。
确保运行在安全上下文下
Chrome、Edge、Firefox 等现代浏览器要求页面必须通过 HTTPS 或运行在 localhost 上，否则 navigator.clipboard 会不可用（返回 undefined）。
可先检测支持性：
if (!navigator.clipboard) {
console.error('当前环境不支持 navigator.clipboard');
return;
}
必须由用户手势触发（如点击）
浏览器禁止脚本静默访问剪贴板，复制操作必须发生在用户主动交互事件中（例如 click、keydown），不能在异步回调（如 setTimeout、fetch.then）中直接调用。
立即学习“Java免费学习笔记（深入）”；
✅ 正确示例：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('要复制的文本');
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
});
❌ 错误示例（不会生效）：
setTimeout(() => {
navigator.clipboard.writeText('xxx'); // 报错：NotAllowedError
}, 1000);
处理常见错误类型
复制可能失败，常见原因包括用户拒绝权限、页面失焦、或系统剪贴板被占用。建议捕获并区分错误：
- NotAllowedError：权限未授予或非用户手势触发
- NotFoundError：剪贴板 API 不可用（极少见）
- SecurityError：页面非安全上下文（HTTP 非 localhost）
- ReadabilityError / DataCloneError：传入非字符串值（如对象）
实际使用时建议只传入字符串，并做好降级提示：
async function copyText(text) {
if (typeof text !== 'string') text = String(text);
try {
await navigator.clipboard.writeText(text);
return true;
} catch (err) {
console.warn('复制失败', err.name, err.message);
return false;
}
}
兼容旧浏览器（可选降级方案）
若需支持 Safari 13.1 以下或 IE，可回退到 document.execCommand('copy')（已废弃但仍有支持）：
function fallbackCopyText(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // 防止滚动影响
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
const success = document.execCommand('copy');
document.body.removeChild(textarea);
return success;
} catch (err) {
document.body.removeChild(textarea);
return false;
}
}
生产环境建议优先用 navigator.clipboard，仅对不支持的环境自动降级。
