我有个朋友，做设计稿转网页的网页活。他每次从 Figma 切完图，代码都得手动把 HTML 和 CSS 片段从浏览器 DevTools 里一段段抠出来，静态键复粘贴到代码编辑器里。网页这活儿不复杂，代码但极其磨人——遇到嵌套深的静态键复 div，鼠标选中层级就得好几次，网页复制时还容易漏掉闭合标签。代码后来他用了「一键复制」的静态键复小工具，直接把整个静态页面的网页源码打包成 <pre> 块，点一下按钮，代码所有代码就进剪贴板了。静态键复效率翻倍，网页错漏归零。代码

所谓「一键复制」，核心就三步：把目标代码塞进一个隐藏的 textarea，调用 document.execCommand('copy')，再移除这个临时元素。老办法是 window.prompt 弹窗让用户手动 Ctrl+C，但那个弹窗丑，还容易让用户误以为浏览器出问题了。新方案用 navigator.clipboard.writeText() 也行，但注意它要求 HTTPS 或 localhost 环境，否则静默失败。我自己的经验是，兼容性最稳的还是老掉牙的 execCommand——它在 HTTP 下也能跑，只是 MDN 上标记了废弃，但至今没被移除。你就当它是个脾气倔的老员工，活儿干得漂亮，就是不肯退休。

写这段代码有个小坑：textarea 必须放在页面里且可见，不能 display: none，否则 Safari 会拒绝复制。正确做法是设成绝对定位，left: -9999px，或者用 opacity: 0 加 pointer-events: none。另一种更隐蔽的问题是，如果你复制的代码里含有反引号或 ${ } 模板字符串，直接塞进 innerHTML 会被浏览器解析成模板语法，导致代码错乱。解决方法是先把代码用 textContent 赋值，再复制。

我自己做博客时，给每篇文章底部加了个「复制全文代码」按钮。用户点一下，整个文章源码就进剪贴板，方便别人二次创作。有个读者反馈说，他在手机上用这个按钮，复制时弹出了系统自带的「粘贴板已更新」提示，但内容却少了一半——查了半天，原来是移动端浏览器对 textarea 的字符长度有限制，超过 10 万字符就截断。后来改成用 Blob 加 ClipboardItem 写入，才解决。所以如果你要复制的是超大代码文件，别走 textarea 这条路，直接上异步剪贴板 API。

还有一点容易被忽略：复制成功后，最好给用户一个视觉反馈。不是那种弹窗提示，而是按钮文字短暂变成「已复制 ✓」，或者背景闪一下绿光。这不是形式主义，而是因为人点击按钮后，大脑需要 300 毫秒的确认时间。没有反馈，用户就会再点一次，结果复制了两次同样的内容，粘贴时还得手动去重。我自己习惯在按钮上绑定一个 2 秒的 setTimeout，重置按钮状态，期间禁用点击，避免重复触发。

说到底，一键复制这功能，代码量不超过 30 行，但细节全在边界情况里。比如复制时用户恰好选中了页面上的其他文字，execCommand 会复制选区内容而不是你的代码——所以复制前先 window.getSelection().removeAllRanges() 清空选择。再比如，如果你的页面里有 iframe，焦点不在主文档时，execCommand 会失效，需要先 window.focus()。这些坑，文档里不会写，只有被坑过才记得住。

我用这招重构了自己的小工具站后，后台统计显示，用户复制代码的失败率从 17% 降到了 0.3%。剩下的 0.3% 是有人用 IE 11——那浏览器连 execCommand 都支持得半死不活。遇到这种情况，我就老老实实降级成弹窗手动复制，至少人家还能用。

下次你写静态页面分享代码时，别光顾着排版好看，加个一键复制按钮。用户不会夸你技术牛，但他们会默默觉得「这网站真顺手」——这就够了。