在前端开发中，“复制到剪贴板” 是一项经常出现的需求。无论是验证码、链接还是代码片段，使用者都期望能够一键复制并粘贴到其它地方。只是在实际项目里开发者往往会遇到兼容性差、操作繁琐、异步处理困难等痛点。
主要痛点回顾
-
老旧浏览器不支持 Clipboard API；
-
Safari对 `execCommand` 的限制；
-
HTTPS 与非 HTTPS 环境下 API 可用性不同；
-
大文本复制导致页面卡顿；
-
复制后页面仍处于选中状态影响 UX；
-
异步回调中无法捕获复制结果。
. 简介
copy-to-clipboard 是一款零依赖、体积仅约 1KB 的 JavaScript 库。它环境优先使用现代 Clipboard API。若不支持则降级为传统 `document.execCommand`，从而解决了兼容性与性能两大痛点。
. 主要优势
-
零依赖直接引入，无需 jQuery 或框架。
-
全网站兼容Chrome、Firefox、Safari、Edge，还有移动端和 Electron。
-
极简 API单个函数 `copy`。
-
Promise 与回调双模式
-
特殊字符 & 换行自动处理
. 适用场景举例
-
表单验证码、订单号等动态内容复制。
-
BLOG/文档中的代码片段与引用文本。怎么说呢，
-
E‑commerce 商品链接或邀请码分享。
-
Password / JSON 格式化工具结果导出。
-
MobiLe app 中快速复制短信验证码等。
. 关键技术原理
. 前端剪贴板操作方式对比
再看传统方式。`document.execCommand
-
Create hidden editable element .
-
Select its content.
-
`document.execCommand` copies it.
-
Cleans up element.
至于缺陷，
-
Safari iOS 限制，仅在同步交互事件中有效。只能复制纯文本，不能处理图片/文件等二进制内容。
Synchronous，没有 Promise 回调机制。
说起来，
现代方式的观点是，Clipboard API
从优势来看。
-
`writeText` & `readText` 返回 Promise，可用 async/await。
`write` 支持 Blob 等二进制数据。
-
至于`https。//localhost` 必须满足安全上下文，否则不可用。
兼容性这方面。
-
,某些旧版 Chrome 不支持，需要降级。
-
Safari 对 `execCommand` 的限制仍然存在。
-
参数处理：
接受字符串或 DOM 元素，并自动提取文本及换行格式。
-
环境检测：
判断是否支持
navigator.clipboard.writeText。如果可用则走现代方法，否则走传统方法。
-
现代方法执行：
调用
navigator.clipboard.writeText
-
降级方法执行：
创建隐藏
