📌 clipboard.js 介绍
clipboard.js 是一个轻量级的 JavaScript 复制到剪贴板库，可以让用户一键复制文本，而无需依赖 Flash 或复杂的 API 兼容代码。
✅ 1. 安装 clipboard.js
方法 1：CDN 引入
复制代码
1<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
方法 2：使用 npm
复制代码
1npm install clipboard
然后在 JS 代码中导入：
复制代码
1import ClipboardJS from 'clipboard';
✅ 2. 使用示例
📌 方式 1：点击按钮复制内容
复制代码
1
2
3
4
5
6
7<input type="text" value="复制的文本" id="text-to-copy"> <button class="btn" data-clipboard-target="#text-to-copy">复制</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script> <script> new ClipboardJS('.btn'); </script>
✅ 工作原理
data-clipboard-target="#text-to-copy"指定要复制的目标new ClipboardJS('.btn')让所有.btn元素都支持复制
📌 方式 2：直接复制文本（不需要 input）
如果你想直接复制一段字符串，而不是 input 里的值：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<button class="copy-btn">复制文本</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script> <script> var clipboard = new ClipboardJS('.copy-btn', { text: function() { return "Hello, 这是被复制的文本！"; } }); clipboard.on('success', function(e) { alert('复制成功！'); e.clearSelection(); }); clipboard.on('error', function(e) { alert('复制失败，请手动复制！'); }); </script>
✅ 适用于：
动态复制字符串
不依赖 input 或 textarea
📌 方式 3：复制并显示提示
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<input type="text" value="https://example.com" id="link"> <button class="btn" data-clipboard-target="#link">复制链接</button> <span id="copy-status"></span> <script> var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function(e) { document.getElementById('copy-status').textContent = "复制成功！"; setTimeout(() => { document.getElementById('copy-status').textContent = ""; }, 2000); }); clipboard.on('error', function(e) { document.getElementById('copy-status').textContent = "复制失败！"; }); </script>
✅ 适用于：
用户体验优化（显示复制状态）
自动隐藏提示
✅ 3. 适用场景
| 场景 | clipboard.js 适用性 |
|---|---|
| 按钮一键复制 | ✅ 非常适合 |
| 动态复制 JS 变量 | ✅ 适用 |
| 支持所有浏览器（不依赖 Flash） | ✅ 兼容性好 |
| 长按复制（移动端） | ❌ 需要额外优化 |
✅ 4. 兼容性
clipboard.js兼容所有现代浏览器但 不支持 IE9 及以下
🚀 如果你的应用需要快速实现复制功能，clipboard.js 是最佳选择！
你是要在 PC 端还是移动端使用？是否需要优化提示 UI？😊
最后
以上就是每日一库最近收集整理的关于一个轻量级的 JavaScript 复制到剪贴板库clipboard.js的全部内容，更多相关一个轻量级的内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复