JavaScript库:clipboardjs复制到剪贴板 作者:马育民 • 2026-02-02 18:18 • 阅读:10002 # 介绍 `clipboard.js`是 **轻量级、无依赖** 的JavaScript库,核心作用就是快速实现 **浏览器端的复制到剪贴板** 功能,不用写复杂的原生剪贴板API代码,也不需要依赖jQuery这类第三方库。 中文官网: https://clipboard.nodejs.cn/ ### 特点 1. **无依赖**:体积极小(压缩后仅几KB),直接引入就能用,不依赖任何框架; 2. **使用简单**:支持**属性式调用**(无需写太多JS)和**编程式调用**(灵活控制)两种方式; 3. **兼容性好**:兼容主流浏览器,包括Chrome、Firefox、Safari、Edge,也对移动端浏览器做了适配(低版本IE除外); 4. **场景覆盖**:可以复制按钮、输入框、普通文本节点的内容,也能复制动态生成的文本。 ### 适用场景 1. 网页中的**一键复制**功能(如邀请码、优惠券、链接、代码片段); 2. 后台管理系统中复制ID、账号、配置信息; 3. 移动端H5页面的复制功能(适配移动端浏览器); 4. 动态生成内容的复制(如接口返回的临时链接)。 # 安装 ### 引入库 可以通过CDN直接引入,也可以npm安装后引入,推荐CDN快速使用: ```html ``` ### npm安装方式 ```bash npm install clipboard --save ``` # 使用 ### 方式1:属性式调用(最简洁,适合静态内容) 通过`data-*`自定义属性绑定**触发元素**(如按钮)和**被复制元素**(如文本容器),无需写复杂JS逻辑。 - `data-clipboard-target`:指定**被复制元素的选择器**(复制已有元素的内容); - `data-clipboard-text`:直接指定**要复制的固定文本**(无需关联其他元素)。 例子: ```html 我是要被复制的文本 复制文本 复制固定文本 ``` ### 方式2:编程式调用(更灵活,适合动态内容) 手动指定要复制的内容,适合内容由JS动态生成、没有对应DOM元素的场景: ```html 复制动态生成的内容 ``` # 总结 1. `clipboard.js`是**轻量无依赖**的JS库,专门解决浏览器端复制到剪贴板的需求,使用成本极低; 2. 支持**属性式**(简洁)和**编程式**(灵活)两种调用方式,覆盖静态/动态内容复制; 3. 提供成功/失败回调,兼容主流浏览器,适合绝大多数前端复制场景; 4. 单页应用需手动销毁实例,避免内存泄漏,其底层兼容了原生剪贴板API,比直接写原生代码更省心。 原文出处:http://www.malaoshi.top/show_1GW2ho7XmLYN.html