navigator.clipboard.writetext()是现代浏览器一键复制文本的最简方案，需https/localhost安全上下文、用户手势触发，返回promise需处理成功与失败，不支持ie及旧版浏览器需降级至execcommand。
点击就复制：用 navigator.clipboard.writeText() 最简实现
现代浏览器里，不用第三方库也能一键复制文本，核心就是 navigator.clipboard.writeText()。它直接写入系统剪贴板，比老式 document.execCommand('copy') 更可靠、更干净。
但注意：这个 API 只在安全上下文（HTTPS 或 localhost）中可用，HTTP 站点会静默失败——不是报错，而是根本没反应，这点最容易被忽略。
- 必须由用户手势触发（比如
click、keydown），不能在页面加载或定时器里调用，否则抛NotAllowedError - 返回 Promise，记得用
.then()或async/await处理成功/失败，别只写调用不处理拒绝 - 要复制的内容必须是字符串；传对象或
undefined会转成"[object Object]"或"undefined"，不是你想要的
按钮绑定复制逻辑：HTML + JS 联动写法
按钮本身不需要特殊属性，重点是 JS 怎么拿到要复制的值。常见场景是复制旁边 <pre class="brush:php;toolbar:false;"></code> 里的代码、某个 <code><div></code> 的 <code>textContent</code>，或者预设的常量。</p>
<p>示例：点击按钮复制一段 JSON 配置</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2639" title="XiaoHu.AI"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/176907512285288.png" alt="XiaoHu.AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2639" title="XiaoHu.AI">XiaoHu.AI</a>
<p>由小互建立的一个AI资讯、教程、课程、工具以及开源项目案例的平台。</p>
</div>
<a href="/ai/2639" title="XiaoHu.AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class="brush:php;toolbar:false;">const btn = document.querySelector('#copy-btn');
btn.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('{ "env": "prod", "timeout": 5000 }');
console.log('已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);
}
});</pre>
<ul>
<li>别把 <code>writeText() 写在 DOMContentLoaded 外层，确保 DOM 已就绪再绑定事件
input.value 或 textarea.value，注意是否含多余换行或空格，可先用 .trim()
navigator.clipboard 支持较晚（iOS 13.4+），旧版本需降级方案兼容性兜底：当 navigator.clipboard 不可用时怎么办
IE 完全不支持，老版 Chrome/Firefox 也只支持 execCommand。现在没必要硬兼容 IE，但对部分安卓 WebView 或低版本桌面浏览器，加一层判断更稳妥。
检测方式很简单：
if ('clipboard' in navigator) {
// 用 writeText()
} else {
// 降级：创建临时 textarea → select → execCommand('copy')
}
-
execCommand('copy')必须作用于已插入 DOM 且可见的元素，隐藏的textarea要设position: fixed; left: -9999px;，不能用display: none或visibility: hidden - 调用
execCommand前必须先focus()和select()，缺一不可 - 这个降级路径在新版 Chrome 中已被弃用警告（DeprecationWarning），仅作过渡，不要作为主力方案
用户体验细节：复制后反馈不能少
用户点了按钮，没任何响应，就会怀疑是不是没点上或功能坏了。哪怕只是改个按钮文字，也比干等强。
- 推荐做法：点击后立刻禁用按钮（
btn.disabled = true），显示“已复制”，2 秒后恢复 - 避免用
alert()，打断操作流；也不要用 console.log，用户看不到 - 如果按钮图标是 ?，复制成功可临时换成 ✅，视觉反馈更直接
- 注意：Promise 拒绝时也要还原按钮状态，否则用户会卡在“已禁用”状态无法重试
真正的难点不在调用 API，而在判断什么时候该用哪个 API、怎么拿值、怎么不让用户困惑。安全上下文、用户手势、异步错误处理、降级边界——这些地方漏一个，功能就容易在某台手机或某个内网环境里突然失灵。
