必须用javascript绑定点击事件并从code元素准确提取textcontent，否则复制为空字符串、html标签或丢失缩进；因innertext合并空白、innerhtml含高亮标签，而textcontent保留\n\t但需清洗首尾空行。
直接给 <code> 标签加按钮不行，必须用 JavaScript 绑定到用户点击事件，并确保目标文本从 <code> 元素中准确提取——否则复制出来的是空字符串、HTML 标签或缩进全丢。
为什么复制后缩进没了或变成空格
常见现象：代码粘贴到 VS Code 或终端里，所有 \t 变成单个空格，空行消失，甚至首尾缩进被砍掉。
-
innerText会合并空白、折叠换行，不适合代码；innerHTML会把<span class="token keyword">def</span>这类高亮标签原样复制，根本不是代码 - 正确做法是读取
<code>元素自身的textContent，它保留原始\n和\t - 但要注意：如果代码块被 Prism.js / Highlight.js 处理过，
<code>内部可能混有注释、空格或换行符，建议清洗：codeEl.textContent.replace(/^\s+|\s+$/g, '') - Firefox 116+ 支持
navigator.clipboard.write()+Blob精确保留空白，但 Safari 和旧 Chrome 仍得靠writeText()+ 清洗后的textContent
按钮点击没反应的三个硬性条件
不是代码写错了，而是浏览器直接拦掉——只要缺一个，navigator.clipboard.writeText() 就不会执行，也不报错。
- 页面必须是 HTTPS 或
localhost（file://协议下navigator.clipboard是undefined） - 调用必须在用户手势中：只能绑定
click、touchend，不能放在setTimeout、fetch.then或DOMContentLoaded回调里 - 如果页面嵌在 iframe 中，父页需声明
<iframe src="..." allow="clipboard-write"></iframe> - 验证是否就绪：打开控制台输入
console.log(navigator.clipboard && window.isSecureContext)，返回true才算过关
一个按钮对应一个 code 块的 DOM 定位写法
多个代码块共用同一个按钮或选择器，会导致全部复制第一个内容——这是最常被忽略的结构错误。
- 别写死
document.querySelector('code')，要用相对定位：button.closest('pre').querySelector('code') - 如果
<code>不在<pre class="brush:php;toolbar:false;"></pre>里（比如单独使用），改用button.previousElementSibling.querySelector('code')或加data-target属性：<button data-target="code-1"></button>→document.getElementById(btn.dataset.target) - 避免全局函数重名覆盖（如两个
<script></script>都定义copy()），统一用事件委托或闭包封装 - 移动端 Safari（iOS 13.4+）支持
writeText()，但 iOS 12 及更早需降级；不值得为 iOS 12 加完整execCommand逻辑，直接提示“请升级浏览器”更实际
复制成功后怎么反馈才不干扰阅读
弹 alert 或 toast 会打断操作流，而什么都不变又让用户不确定是否成功。
- 点击后立刻改按钮文字为
"已复制"，并加disabled防连点 - 2 秒后自动切回
"复制"并移除disabled，用setTimeout即可（这个延迟不触发权限问题） - 不要用 CSS 动画隐藏/显示按钮，屏幕阅读器可能无法感知状态变化
- 可选：加
title="复制代码"，鼠标悬停可见，轻量且无需 JS
真正难的不是写那几行 JS，而是确保每个 code 块和按钮之间的 DOM 关系稳定、文本提取路径干净、安全上下文真实存在——这三处出错，90% 的“点不动”问题就都解释得通了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
