### [div 里的文本怎么一键复制](https://www.huociguo.com/article/1717)

**Published:** 2026-10-02T04:15:35

**Author:** 米了

**Excerpt:** 展示邀请码、卡号、命令行片段时，配一个复制按钮能省掉手动全选的麻烦。现代浏览器提供了 Clipboard AP…

展示邀请码、卡号、命令行片段时，配一个复制按钮能省掉手动全选的麻烦。现代浏览器提供了 Clipboard API，几行代码即可完成。

![屏幕上的一段代码与按钮](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-5595173.jpeg)

复制按钮常与代码片段搭配出现。图片来自 Pexels。

## 实现步骤

第一步，给目标 div 加一个 id，例如 id=”code-box”，把需要复制的文本放在里面。

第二步，写一个按钮，点击时读取 div 的文本内容：

const text = document.getElementById('code-box').innerText;
navigator.clipboard.writeText(text).then(() => {
  btn.textContent = '已复制';
});

第三步，处理失败分支。Clipboard API 返回 Promise，权限被拒或不支持时会 reject，用 catch 给出提示。

## 三个注意点

其一，navigator.clipboard 只在安全上下文可用，即 https 或 localhost。普通 http 站点会拿到 undefined，需要降级方案。

其二，innerText 与 textContent 有区别。innerText 保留可见换行，textContent 会带上隐藏元素的文本，复制可见内容时用 innerText 更符合预期。

其三，旧方案 document.execCommand(‘copy’) 已被标记废弃，需要先创建临时 textarea 再选中复制，仅在不支持 Clipboard API 的环境里作为兜底。

按钮文案建议在复制成功后短暂变为「已复制」，一到两秒后还原，形成明确的操作反馈。

**Tags:** clipboard API, DOM操作, 剪贴板, 复制功能, 文本选择

**Categories:** HTML5

---