原生 javascript 复制文本应使用 navigator.clipboard.writetext()，需在用户手势事件中调用并用 try...catch 捕获 notallowederror 等异常，document.execcommand('copy') 已废弃且兼容性差。
点击按钮复制指定文本内容
不需要引入任何第三方库，用原生 JavaScript 就能完成。核心是 navigator.clipboard.writeText()，它直接写入系统剪贴板，兼容现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+）。
常见错误是直接调用该 API 却没处理权限或异常——比如用户未与页面交互就触发复制，或浏览器不支持时抛出 NotAllowedError 或 TypeError。
- 必须在用户手势（如
click、keydown）回调中调用，否则 Safari 和部分 Edge 版本会静默失败 - 建议包裹
try...catch，捕获NotAllowedError（权限被拒）、NotFoundError（API 不存在）、SecurityError（HTTPS 环境缺失）等 - 不要对
document.execCommand('copy')抱有期待：它已被废弃，且在 Firefox 中早已失效，在 Safari 中完全不可用
兼容旧版浏览器的降级处理
如果项目仍需支持 IE11 或老版 Safari（document.execCommand + textarea 模拟方案。但注意：该方式必须将 textarea 插入 DOM、聚焦、选中，且不能设为 display: none 或 visibility: hidden，否则 IE 和旧 Safari 无法选中。
- 用
position: absolute; left: -9999px;隐藏textarea，而非 display/visibility - 设置
readonly属性可避免 iOS 键盘意外弹出 - 复制完成后记得移除临时
textarea，防止内存泄漏或重复插入 - 降级逻辑只应在检测到
navigator.clipboard不存在或调用失败后才执行
防止多次快速点击导致状态混乱
用户连点按钮时，若没做防抖或状态锁定，可能触发多次复制、多次提示，甚至出现“复制成功”和“复制失败”交替闪现。这不是 UI 问题，而是逻辑竞争。
- 点击后立即将按钮设为
disabled，并改文案为“已复制”或加 loading 状态 - 使用
setTimeout在 2 秒后恢复按钮状态，比监听异步结果更可靠（尤其降级路径里execCommand不返回 Promise） - 避免在 Promise
.then()里恢复按钮——万一 catch 了却忘了恢复，按钮就永远卡住
安全上下文与 HTTPS 限制
navigator.clipboard 在非安全上下文（即 HTTP 页面）中会被禁用，Chrome 和 Edge 会直接抛 SecurityError，Firefox 则可能静默拒绝。开发时本地 file:// 协议也属于不安全上下文，必然失败。
- 本地调试请用
python3 -m http.server或 VS Code Live Server 启动 HTTP 服务 - 上线前务必确认站点部署在 HTTPS 下，HTTP → HTTPS 的跳转不等于“安全上下文已建立”，必须初始请求就是 HTTPS
- 不要试图绕过这个限制：没有合法手段能在 HTTP 页面启用
clipboard.writeText
真正麻烦的不是写几行代码，而是把权限判断、降级路径、按钮状态、安全上下文这四件事串成一条不掉链子的逻辑线。少一个环节，用户在某个浏览器上就大概率点不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
