首选 navigator.clipboard.writetext()，需 https/localhost 安全上下文；不支持时降级 document.execcommand('copy')；注意权限拒绝、dom 选择、事件冒泡、换行处理及超长文本限制。
点击按钮触发复制操作，navigator.clipboard.writeText() 是首选
现代浏览器基本都支持 navigator.clipboard.writeText()，它能直接把字符串写入系统剪贴板，无需创建临时 <textarea></textarea> 或操作 DOM。但要注意：该 API 只在安全上下文（HTTPS 或 localhost）中可用，HTTP 站点会静默失败或抛出 "Permission denied" 错误。
实操建议：
- 先检查环境：
if (!navigator.clipboard)说明浏览器不支持（如 IE 或旧版 Safari），需降级处理 - 调用前最好加
try/catch，因为用户可能拒绝权限，错误信息通常是"Permission denied" - 复制成功后建议给用户轻量反馈（比如按钮文字临时变成“已复制”），避免用户重复点击
兼容老浏览器？用 document.execCommand('copy') 降级方案
document.execCommand('copy') 虽已被标记为废弃，但在 Safari 13.1 之前、部分安卓 WebView 中仍是唯一可行方式。它依赖一个聚焦且可选中的临时元素（通常是 <textarea></textarea>），流程更重，也更容易出错。
常见坑：
- 必须手动
.select()并.focus()，否则复制空内容 - 若页面有
user-select: none全局样式，<textarea></textarea>会被禁选，导致复制失败 - 移动端某些场景下
.focus()会触发键盘弹出，体验差；可加style="position: absolute; left: -9999px;"隐藏但保留可操作性
按钮绑定事件时，别忘了阻止默认行为和冒泡干扰
如果按钮在表单里或被封装在自定义组件中，click 事件可能触发表单提交或父级事件，导致页面刷新或意外跳转。
安全写法：
- 事件处理器第一行写
event.preventDefault() - 如果按钮嵌套在
<label></label>或其他可交互容器里，加event.stopPropagation()防止冒泡 - 不要用
onclick="copyText()"内联写法——无法优雅处理 Promise 或异常，也不利于复用
复制长文本或含换行的内容，注意 \n 和 HTML 实体的处理
纯文本复制时，\n 在大多数终端和编辑器中能正常换行，但粘贴到 Excel 或微信等应用可能被忽略。如果目标是保持格式，得考虑用 clipboard.write() 写入 text/plain 和 text/html 多类型数据（兼容性较差，慎用）。
容易被忽略的细节：
- 从 DOM 读取文本时，用
textContent而非innerText，避免样式影响和换行截断 - 若原文含 HTML 实体（如
textContent会原样返回字符实体字符串，不是空格——需要DOMParser或正则预处理 - 超长文本（如 >10MB）在部分浏览器会触发
QuotaExceededError，建议提前截断并提示
navigator.clipboard.writeText()，失败再走 execCommand 降级，最后兜底提示“请手动复制”。真正麻烦的不是 API 调用本身，而是各种边界场景下的静默失败。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
