标签本身不支持双击复制，需javascript配合和隐藏实现；现代推荐用clipboard api，但须用户手势触发且需execcommand降级兼容。
<code> 标签本身不支持双击复制，它只是语义化地表示一段计算机代码，浏览器不会给它加任何交互行为。想实现“双击复制”，必须靠 JavaScript 配合 <code> 或其他容器（比如 <pre class="brush:php;toolbar:false;"><code></code>）来完成。</pre>
为什么不能直接给 <code> 绑双击事件？
因为 <code> 是内联元素，双击默认触发的是文字选中（可能只选中部分），且没有 select() 能力；更关键的是，现代浏览器禁止在非表单元素上直接调用 document.execCommand('copy')（已废弃），必须基于 <textarea></textarea> 或 <input> 这类可聚焦、可选中的表单控件来操作。
<code>没有.select()方法，也不能被.setSelectionRange()- 直接对
<code>调用execCommand('copy')会静默失败或报错Uncaught TypeError: document.execCommand is not a function - 即使强行用
Clipboard API，也需用户手势触发（如 click、dblclick），且要处理权限和异步 Promise
推荐做法：用 <pre class="brush:php;toolbar:false;"><code></code> 包裹内容 + 隐藏 <code><textarea></textarea></code> 中转</pre>
这是兼容性好、逻辑清晰、不依赖第三方库的方案。核心是：双击触发时，把 <code> 的文本写入一个临时 <textarea></textarea>，选中并复制，再移除它。
- 确保
<code>在<pre class="brush:php;toolbar:false;"></pre>内（保留换行和空格），用textContent取值，避免 HTML 解析干扰 - 创建一个
<textarea style="position:fixed;top:-9999px;"></textarea>，设为不可见但可聚焦 - 双击事件监听在
<pre class="brush:php;toolbar:false;"></pre>上比<code>更稳妥（防止双击落在空白处失效） - 务必调用
textarea.focus()，否则 iOS Safari 和部分安卓 WebView 无法复制
示例片段：
<pre class="code-block"><code>fetch('/api/data').then(r => r.json()).then(console.log);</code>
<script>
document.querySelectorAll('.code-block').forEach(block => {
block.addEventListener('dblclick', () => {
const codeText = block.querySelector('code').textContent;
const ta = document.createElement('textarea');
ta.value = codeText;
ta.style.cssText = 'position:fixed;top:-9999px;left:-9999px;';
document.body.appendChild(ta);
ta.focus();
ta.select();
try {
document.execCommand('copy');
console.log('已复制');
} catch (e) {
// fallback to Clipboard API
navigator.clipboard.writeText(codeText);
}
document.body.removeChild(ta);
});
});
</script>
用 Clipboard API 替代 execCommand 的注意事项
navigator.clipboard.writeText() 是现代标准，但有硬性限制：必须在用户手势（click、dblclick、keydown 等）的同步上下文中调用，且不能有异步延迟（比如 setTimeout 包裹就会失败）。
- 双击事件处理器内直接调用
navigator.clipboard.writeText(text)是安全的 - 如果用了
async/await，必须确保函数本身是事件处理器（不是被 await 调用的子函数） - 需处理拒绝情况：
navigator.clipboard.writeText(...).catch(e => console.error('复制失败:', e)) - 旧版 Safari（≤13.1）不支持
navigator.clipboard，仍需execCommand降级
真正容易被忽略的点是：双击复制看似简单，但跨平台一致性差——iOS 上双击常触发放大，Android WebView 对 execCommand 支持残缺，而 Clipboard API 在非 HTTPS 环境下完全禁用。所以生产环境建议同时提供按钮复制（显式点击）+ 双击快捷（增强体验），而不是只押注一种交互方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
