现代浏览器支持 navigator.clipboard.writeText() 直接复制文本，需在用户点击等手势中触发且页面为 HTTPS/localhost；复制多行代码应使用 textContent 保留换行缩进，不支持时回退 execCommand；需提供轻量视觉反馈并注意移动端适配。
点击按钮触发 navigator.clipboard.writeText() 复制文本
现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 16.4+）原生支持 navigator.clipboard.writeText()，这是最直接、最可靠的方式。它能复制任意字符串，包括带缩进的代码片段，且无需依赖第三方库或隐藏 <textarea>。
常见错误是直接调用该 API 却忽略权限和上下文限制：它必须在用户手势（如 click）中触发，且页面需为安全上下文（https:// 或 localhost）。否则会抛出 "navigator.clipboard is not available" 或 "Permission denied" 错误。
- 确保按钮绑定的是
click事件监听器，而非onload或定时器 - 避免在异步回调（如
setTimeout、fetch.then）里调用，除非明确捕获了初始点击事件 - 复制前可先检查支持性：
if (!navigator.clipboard)做降级提示
处理多行代码时保留换行与缩进
HTML 中的换行符（\n）默认不会在剪贴板中生效，如果从 <pre><code> 区域提取内容，需注意空格和制表符是否被 HTML 渲染器折叠。直接读取 textContent 通常比 innerText 更准确，因为它保留原始空白字符。
示例场景：你有一段 Python 代码嵌在 <pre class="code-block"><code>def hello():\n print("hi")</code></pre> 中，想一键复制完整格式：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const btn = document.querySelector('.copy-btn');
const codeEl = document.querySelector('.code-block code');
btn.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(codeEl.textContent);
} catch (err) {
console.error('复制失败:', err);
}
});
-
textContent会保留\n和空格；innerText会将缩进转为空格并合并换行 - 若代码来自动态生成或经过高亮插件（如 Prism.js）处理，确认目标元素是原始
<code>，而非被包裹的 span 节点 - 某些 CMS 或编辑器会把
\t转成多个
兼容旧浏览器或禁用 Clipboard API 的情况
当 navigator.clipboard 不可用（如 IE、旧版 Safari 或 HTTP 页面），需回退到 document.execCommand('copy') 方案，但它要求临时聚焦一个 <textarea> 并选中内容——这会干扰页面焦点，且已被标记为废弃。
关键细节：该方法只能复制纯文本，且 <textarea> 必须在 DOM 中、可见、且未被 disabled 或 readonly 阻止选中。
- 创建
<textarea>时设style="position: absolute; left: -9999px;"避免布局影响 - 务必在
execCommand前调用textarea.select()，否则无效 - IE11 支持
execCommand，但不支持async/await，需用Promise.resolve().then(...)包裹
复制后提供视觉反馈，但别过度干扰
用户点击“复制”后没反馈，容易反复点击。简单显示“已复制”提示即可，但不要弹 alert() 或遮罩层——尤其在文档内频繁出现代码块时，体验会变差。
推荐做法：按钮文字临时切换，2 秒后恢复。避免使用全局状态管理或复杂动画，保持轻量：
btn.textContent = '已复制';
setTimeout(() => {
btn.textContent = '复制';
}, 2000);
- 不要用
disabled禁用按钮，否则键盘用户无法再次操作；改用pointer-events: none+ 透明度变化更安全 - 若页面有多个复制按钮，确保每个都独立控制状态，别共用同一个变量
- 移动端点击区域小，按钮最小尺寸建议 ≥ 44×44px，避免误触
innerHTML 提取内容，结果把 HTML 标签也复制进去了；或者在 SSR 渲染页面中，DOMContentLoaded 未等脚本就执行，导致 querySelector 找不到元素。这些细节不报错，但功能静默失效。 
