Clipboard.js 纯 JavaScript 实现无 Flash 剪贴板复制
本文详细介绍如何使用 Clipboard.js 在无需 Flash 的情况下实现网页内容的复制与剪切功能。涵盖基础引入、DOM 实例化、属性配置（data-clipboard-target、action、text）、API 事件监听以及移动端兼容性处理，并提供主流浏览器支持列表与完整示例代码。
Clipboard.js 基本使用
Clipboard.js 是一款基于纯 JavaScript 的插件，旨在无需 Flash 支持的情况下，帮助用户将文本内容复制到系统剪贴板。以下简要介绍其基本用法。
一、引入插件
<script src="js/clipboard.min.js"></script>
二、基本使用
首先，需要通过传递 DOM 选择器、HTML 元素或 HTML 元素列表来实例化该对象。
new Clipboard('.btn');
可以使用一个元素作为触发器，通过指定 data-clipboard-target 属性并跟随目标元素的选择器，来复制另一个元素的文本内容。
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <button class="btn" data-clipboard-target="#foo"> </button>
此外，还可以使用 data-clipboard-action 属性来指定执行 copy（复制）还是 cut（剪切）操作，默认值为 copy。需要注意的是，cut 操作仅适用于 input 或 textarea 元素。
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>如果希望直接从属性中复制文本，而无需借助其他触发元素，可以使用 data-clipboard-text 属性，并在其中直接填入需要复制的文本内容。
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>三、其他说明
1、可通过运行 Clipboard.isSupported() 检查浏览器是否支持该功能，若返回 true 则表示可以使用。 2、可以显示用户反馈，或在复制/剪切操作完成后捕获所选内容。涉及的操作、文本及触发元素信息均可通过事件对象获取。
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});该插件采用事件委托机制来触发操作，从而大幅减少了对 DOM 的直接操作，提升了性能。
四、高级使用
如果不想修改 HTML 结构，或者目标内容的标签无法被选中（这在移动端较为常见），可以使用便捷的命令式 API。只需声明一个函数，定义所需操作并返回值即可。以下示例展示了如何针对不同 ID 的触发器返回不同值。具体用法请参考官方文档：https://clipboardjs.com
五、移动端复制失败分析详解
移动端复制失败的主要原因通常是目标内容无法被选中，导致无法获取文本。使用上述函数式 API 通常可以解决此问题，但也可参考以下分析过程。
clipboard.js 在移动端复制失败的解决方法
六、支持的浏览器
支持 Chrome 42+、Firefox 41+，其他浏览器请查阅官方文档。
下面是实例
Clipboard.js 实现了纯 JavaScript（无 Flash）的浏览器内容复制到系统剪贴板的功能，可在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+。
官方网站：https://github.com/zenorocha/clipboard.js
软件下载：//www.jb51.net/jiaoben/385604.html
官方使用方法：https://zenorocha.github.io/clipboard.js/#example-text
示例代码：
官方实例一：
在线演示：http://demo.jb51.net/js/2015/clipboard/
<script src="clipboard.min.js"></script>
<textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">本站是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
Cut to clipboard
</button>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert("复制成功");
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>官方实例二：
<script src="dist/clipboard.min.js"></script>
<button class="btn">
<script type="text/javascript">
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>到此这篇关于 Clipboard.js 无需 Flash 的 JavaScript 复制粘贴库的文章就介绍到这了，更多相关 JavaScript 内容复制 Clipboard 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19