现代浏览器要求复制操作必须在用户手势同步上下文中执行且页面为安全上下文，异步调用会报“permission denied”；推荐使用navigator.clipboard.writetext()并降级至document.execcommand('copy')，同时注意选中、聚焦及隐藏状态处理。
点击按钮触发复制时，navigator.clipboard.writeText() 报错 "Permission denied"
现代浏览器要求复制操作必须在用户手势（如 click、keydown）的同步上下文中执行，且页面需为安全上下文（https:// 或 localhost）。如果在异步回调（比如 setTimeout、fetch.then）里调用 navigator.clipboard.writeText()，就会触发权限拒绝。
- 确保按钮绑定的是原生
click事件，不要解耦成 Promise 回调后再调用复制 - 避免在
async函数中等待其他操作完成后再执行复制——哪怕只等 0ms，也脱离了用户手势链 - 开发阶段用
http://localhost:xxxx完全可行；但若部署到非 HTTPS 域名，navigator.clipboard直接不可用（返回undefined）
document.execCommand('copy') 已废弃，但仍有兼容需求
老项目或需支持 IE11 / Safari 13.1 之前版本时，document.execCommand('copy') 是唯一选择，但它依赖手动聚焦并选中 <input> 或 <textarea></textarea> 元素。该 API 在 Chrome 63+、Firefox 83+ 中已被标记为废弃，控制台会输出警告，且未来可能彻底移除。
- 必须先调用
element.select()（对<input>或<textarea></textarea>），再执行document.execCommand('copy') - 注意：Safari 对
contenteditable区域的execCommand支持不稳定，优先用表单控件 - 复制前建议临时移除
readonly属性（否则select()失效），复制完再恢复
完整可运行的双兼容方案（推荐直接复用）
以下代码同时处理现代 API 和降级路径，无第三方依赖，适用于所有主流浏览器：
function copyToClipboard(inputElement) {
const text = inputElement.value;
if (!text) return;
// 优先尝试 navigator.clipboard
if (navigator.clipboard) {
navigator.clipboard.writeText(text).catch(err => {
console.warn('Clipboard API failed:', err);
fallbackCopy(inputElement);
});
return;
}
// 降级：execCommand
fallbackCopy(inputElement);
}
function fallbackCopy(inputElement) {
inputElement.select();
inputElement.setSelectionRange(0, 99999); // 兼容移动端
try {
document.execCommand('copy');
} catch (err) {
console.error('execCommand failed:', err);
}
}
// 绑定按钮
document.getElementById('copyBtn').addEventListener('click', () => {
const input = document.getElementById('myInput');
copyToClipboard(input);
});
关键点：inputElement.setSelectionRange() 是为了 iOS Safari 和部分 Android 浏览器能正确选中；try/catch 必须包裹 execCommand，否则失败时会中断脚本。
复制成功后没有反馈，用户不知道是否生效
剪贴板操作是静默的，浏览器不会自动提示。不加反馈容易让用户重复点击，甚至误以为功能失效。
- 简单做法：点击后临时将按钮文字改为
"已复制！"，2 秒后还原 - 更稳妥的做法：用
getSelection().toString()验证当前选中文本是否与目标一致（仅限execCommand路径）；navigator.clipboard.readText()可读取粘贴板内容做比对，但需额外权限且有延迟 - 注意：不要用
alert()，它会打断用户流程，且在某些浏览器中会阻塞后续复制操作
真正麻烦的是跨域 iframe 场景下剪贴板权限被隔离，或者输入框被 display: none 或 visibility: hidden 隐藏——这时 select() 会失败，writeText() 却不报错，结果就是“看似成功实则没复制”。这种细节，调试时得用真机 + 实际粘贴验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
