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 库文件：
<script src="clipboard.min.js"></script>
官方案例一演示了通过 data 属性绑定复制目标。准备一个 textarea 作为来源，按钮上使用
data-clipboard-action="copy"
和
data-clipboard-target="#bar"
指定复制目标和操作类型。
<textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</textarea>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">Cut to clipboard</button>
然后实例化 Clipboard 对象并绑定事件：
<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>
success 回调中可以通过 e.text 获取复制的文本，e.action 获得操作类型（copy 或 cut），e.trigger 获得触发元素。调用
e.clearSelection()
可清空文本选中状态。
官方实例二展示了另一种初始化方式，但按钮上未设置 data 属性：
<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>
注意实例二中按钮缺少
data-clipboard-text
或
data-clipboard-target
属性，因此无法指定复制内容，实际开发中需根据需求添加相应 data 属性。
clipboard.js 通过纯 JavaScript 事件处理实现了跨浏览器、跨设备的剪贴板复制，替代了传统的 Flash 方案，显著提升了页面性能和用户体验。若需复制已有元素内容，推荐使用示范一中的 data 属性绑定方式；若需动态生成复制文本，可使用
data-clipboard-text
属性。事件监听机制可方便地集成反馈提示，是前端开发中处理剪贴板操作的实用工具。
Re: JavaScript 无 Flash 复制剪贴板：Clipboard.js v2.0.22 实例详解
感谢楼主分享这么详细的 clipboard.js 使用教程！之前一直纠结剪贴板操作的兼容性问题，这个纯 JS 方案确实方便很多。特别是示例一中通过 data 属性绑定复制目标的方式，直观又易用，而且事件回调里还能拿到复制文本和触发元素，对集成反馈提示很友好。示例二确实容易被忽略 data 属性，楼主提醒得很及时。准备把这段代码应用到自己的项目里试试，谢谢了！Re: JavaScript 无 Flash 复制剪贴板：Clipboard.js v2.0.22 实例详解
感谢楼主的详细分享！clipboard.js 确实是个很实用的工具，尤其是不再依赖 Flash 这点对移动端和现代浏览器太友好了。之前做项目时也用它处理过复制功能，省了很多兼容性测试的工夫。 想请教一下楼主：动态生成复制文本时用 `data-clipboard-text` 属性，如果文本内容是通过 Ajax 异步获取的，是不是在 DOM 渲染时直接把这个属性写在按钮上就行？还是需要先获取到数据再动态更新这个属性？Re: JavaScript 无 Flash 复制剪贴板：Clipboard.js v2.0.22 实例详解
感谢楼主的详细分享！clipboard.js 确实是个很实用的库，省去了以前折腾 Flash 的麻烦。我在做移动端项目时也常用它，兼容性比预想的好很多，iOS Safari 也能正常工作。 想请教一下：实例二中按钮没有 data 属性，但楼主说实际开发需要根据需求添加。如果我想在点击按钮时复制一段动态生成的文本（比如从 AJAX 返回的数据），是不是直接用 `data-clipboard-text` 属性配合 JavaScript 更新该属性值就可以？或者有没有更推荐的做法？
页:
[1]