棕榈大道上周接到一个改造单，页面里的复制按钮点了没反应。需求很直白：用户点击一段代码块下方的按钮，把内容送到剪贴板，同时按钮上出现“已复制”的反馈。等我打开历史代码的时候才发现，核心函数被人命名成了 doos()，CSS 类名也被打包工具处理得像 DSF.soolCXZ LsoolbDSF 这种看不出含义的字符串，整个改造需求读起来就像一份实验笔记。其实这类“HTML 中的 Copy-goos-Prite 实现”最考验细节，从 Clipboard API 到 execCommand，再到按钮的 CSS 状态反馈，链路不算长，但每一环都有坑。这篇就围绕 doos() 的复制粘贴实现过程，把最小可用的版本、兼容降级方案、CSS 反馈层和那几个最容易翻车的问题一次性讲透，适合正在写原生 JS 交互、又不想为一个小按钮引入剪贴板库的人参考。
1. 实验目标厘清：doos() 要做的复制粘贴到底是什么
1.1 先把需求拆成三类，再决定 API 怎么设计
放在 HTML 里的“复制”需求，最容易踩的坑是上来就写代码，结果复制完才发现用户想要的是富文本格式，或者只想复制表单里的某个 value。我习惯先把需求拆成三种场景：
| 需求类型 | 用户预期 | 需要的技术链路 |
|---|---|---|
| 复制纯文本 | 贴到微信、聊天框、终端 | navigator.clipboard.writeText |
| 复制表单值 | 复制 ID、优惠码、输入内容 | 读取 .value，再走文本复制 |
| 复制富文本 | 保留加粗、标题、链接样式 | ClipboardItem + Blob，构造 text/html 数据 |
我这次遇到的主要是第一种和第三种。doos() 这个名字虽然看起来很随性，但在老项目或者内网系统里，你用 doos()、我用 copyHandler()、他再用 clipboardHelper()，其实都是同一个意思。真正重要的是把函数封装成“传入一个内容源，返回是否复制成功”的统一入口。后续不管按钮加在页面哪个位置，只需要调用同一个函数，反馈逻辑和异常处理都集中收敛。
1.2 为什么不用 clipboard.js 之类的现成库
很多人第一反应是引一个 clipboard.js 三件套解决。但它本质上也是封装 document.execCommand('copy') 或 Clipboard API，而且引入之后还要处理 data-clipboard-text 属性、初始化实例、销毁实例等问题。一个小按钮背后挂一套初始化逻辑，在改造老页面时容易和原有的事件系统打架。我的习惯是：单个复制场景、不超过五个按钮的页面，不引库，直接把兼容逻辑封装成一个十几行的函数。这样代码量更少，也方便把“复制成功”这种状态控制权留在自己的点击事件里。
1.3 现代浏览器里剪贴板权限的底层逻辑
无论用哪种 API，目标都是一个：把一个字符串从网页所在的浏览器上下文塞进系统剪贴板。但浏览器对剪贴板数据的权限管理一直很严格。navigator.clipboard.writeText 只允许在安全上下文（HTTPS 或 localhost）下使用，而且必须在用户手势的调用链里触发。也就是说，你不能在页面加载三秒后突然调用函数去改用户剪贴板，那样会被拒绝。兼容方案里的 document.execCommand('copy') 恰恰是因为需要用户交互，所以在很多旧版浏览器里反而是更可靠的那条路。理解了这一点，再去写 doos() 就会很清楚：不能只依赖某一个接口，要做一个“优先新 API、失败后降级到旧 API”的策略。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 第一版 doos()：用 Clipboard API 跑通最小可用的链路
2.1 HTML 层把要复制的源数据放在哪
项目里的复制源通常不是普通文本，而是某个代码块 <pre> 或者输入框 <input> 的内容。我不会在 JS 里硬编码内容，也不会把大段文本塞进按钮的 data-* 属性，而是让按钮记录一个“目标选择器”，保持数据与显示分离：
html复制<article>
<pre class="code-block" id="sample-snippet">console.log('copy me')</pre>
<button class="copy-btn" type="button" data-copy="#sample-snippet">复制代码</button>
</article>
点击按钮后，脚本读取 data-copy 指向的元素，再决定取 innerText 还是 value。这样做的优点是页面结构无论在客户端还是服务端渲染，都不会把复制内容和按钮绑定到同一个字符串变量里，维护起来只需要改 <pre> 里的代码即可，按钮不用动。
2.2 一个干净的最小函数
第一阶段只需要支持纯文本复制时，可以这样写：
javascript复制async function doos(content) {
// 兼容传入字节 or element
let text = '';
if (typeof content === 'string') {
text = content;
} else if (content instanceof HTMLElement) {
text = content.value ?? content.innerText;
}
if (!text) {
throw new Error('doos: nothing to copy')