JavaScript 无 Flash 复制剪贴板：Clipboard.js v2.0.22 实例详解

脚本专家

在 Web 开发中，将文本复制到系统剪贴板是一项常见需求。过去很多方案依赖 Flash 插件，存在性能问题且无法在移动端良好运行。clipboard.js v2.0.22 实现了纯 JavaScript 的剪贴板操作，无需 Flash 支持，并且兼容 Chrome 42+、Firefox 41+、IE 9+、Opera 29+，包括 iOS Safari 浏览器。

首先在页面中引入 clipboard.js 库文件：

2. <script src="clipboard.min.js"></script>

复制代码

官方案例一演示了通过 data 属性绑定复制目标。准备一个 textarea 作为来源，按钮上使用

2. data-clipboard-action="copy"

复制代码

和

2. data-clipboard-target="#bar"

复制代码

指定复制目标和操作类型。

2. <textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</textarea>
3. <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">Cut to clipboard</button>

复制代码

然后实例化 Clipboard 对象并绑定事件：

2. <script>
3. var clipboard = new Clipboard('.btn');
4. clipboard.on('success', function(e) {
5.     console.info('Action:', e.action);
6.     console.info('Text:', e.text);
7.     console.info('Trigger:', e.trigger);
8.     alert("复制成功");
9.     e.clearSelection();
10. });
11. clipboard.on('error', function(e) {
12.     console.error('Action:', e.action);
13.     console.error('Trigger:', e.trigger);
14. });
15. </script>

复制代码

success 回调中可以通过 e.text 获取复制的文本，e.action 获得操作类型（copy 或 cut），e.trigger 获得触发元素。调用

2. e.clearSelection()

复制代码

可清空文本选中状态。

官方实例二展示了另一种初始化方式，但按钮上未设置 data 属性：

2. <script src="dist/clipboard.min.js"></script>
3. <button class="btn">
4. <script type="text/javascript">
5. var clipboard = new Clipboard('.btn');
6. clipboard.on('success', function(e) {
7.     console.info('Action:', e.action);
8.     console.info('Text:', e.text);
9.     console.info('Trigger:', e.trigger);
10.     e.clearSelection();
11. });
12. clipboard.on('error', function(e) {
13.     console.error('Action:', e.action);
14.     console.error('Trigger:', e.trigger);
15. });
16. </script>

复制代码

注意实例二中按钮缺少

2. data-clipboard-text

复制代码

或

2. data-clipboard-target

复制代码

属性，因此无法指定复制内容，实际开发中需根据需求添加相应 data 属性。

clipboard.js 通过纯 JavaScript 事件处理实现了跨浏览器、跨设备的剪贴板复制，替代了传统的 Flash 方案，显著提升了页面性能和用户体验。若需复制已有元素内容，推荐使用示范一中的 data 属性绑定方式；若需动态生成复制文本，可使用

2. data-clipboard-text

复制代码

属性。事件监听机制可方便地集成反馈提示，是前端开发中处理剪贴板操作的实用工具。

热心网友6

感谢楼主分享这么详细的 clipboard.js 使用教程！之前一直纠结剪贴板操作的兼容性问题，这个纯 JS 方案确实方便很多。特别是示例一中通过 data 属性绑定复制目标的方式，直观又易用，而且事件回调里还能拿到复制文本和触发元素，对集成反馈提示很友好。示例二确实容易被忽略 data 属性，楼主提醒得很及时。准备把这段代码应用到自己的项目里试试，谢谢了！