JavaScript库：clipboardjs复制到剪贴板-马育民老师

# 介绍

`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

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
```

### npm安装方式

```bash
npm install clipboard --save
```

# 使用

### 方式1：属性式调用（最简洁，适合静态内容）

通过`data-*`自定义属性绑定**触发元素**（如按钮）和**被复制元素**（如文本容器），无需写复杂JS逻辑。

- `data-clipboard-target`：指定**被复制元素的选择器**（复制已有元素的内容）；
- `data-clipboard-text`：直接指定**要复制的固定文本**（无需关联其他元素）。

例子：

```html

<div id="copyText">我是要被复制的文本</div>

<button class="btn" data-clipboard-target="#copyText">复制文本</button>

<button class="btn" data-clipboard-text="直接复制我这段固定文字">复制固定文本</button>

// 复制失败的回调（如浏览器不支持）
  clipboard.on('error', function(e) {
    console.log('复制失败：', e.action);
    alert('复制失败，请手动复制！');
  });
</script>
```

### 方式2：编程式调用（更灵活，适合动态内容）
手动指定要复制的内容，适合内容由JS动态生成、没有对应DOM元素的场景：
```html
<button id="dynamicBtn">复制动态生成的内容</button>

// 成功/失败回调（和属性式一致）
  clipboard.on('success', e => {
    alert('动态内容复制成功！');
    e.clearSelection();
  });

clipboard.on('error', e => {
    alert('复制失败！');
  });
</script>
```

# 总结
1. `clipboard.js`是**轻量无依赖**的JS库，专门解决浏览器端复制到剪贴板的需求，使用成本极低；
2. 支持**属性式**（简洁）和**编程式**（灵活）两种调用方式，覆盖静态/动态内容复制；
3. 提供成功/失败回调，兼容主流浏览器，适合绝大多数前端复制场景；
4. 单页应用需手动销毁实例，避免内存泄漏，其底层兼容了原生剪贴板API，比直接写原生代码更省心。

原文出处：https://malaoshi.top/show_1GW2ho7XmLYN.html