clipboard.js：一个小巧免费 js 剪贴板插件，无需 Flash，无任何依赖，纯 js 实现复制/剪切文本到剪贴板，同时打开指定链接，gzipped 压缩后只有 3KB，实际使用的 clipboard.min.js 约 9KB。
为什么使用 clipboard.js？
写 VPS 主机之类推荐文章，难免会有优惠码优惠券，WordPress 优惠券插件 DRP Coupon 可以实现复制优惠码同时打开链接（打开链接同时复制优惠码），不过需要 flash 支持，加上也不想用 DRP Coupon 管理优惠码……
「clipboard.js — 不依赖 Flash 的 js 剪贴板插件：https://uxtt.com/37」找到 clipboard.js，几乎可以实现同样功能，但是不需要 flash 支持，一直在用，还不错。
clipboard.js 官方网站：https://clipboardjs.com
clipboard.js 使用方法
主要步骤：引入 clipboard.js，初始化对象，目标链接适配即可。
下载 & 引入 clipboard.js 文件
官网下载 clipboard.js，实际使用 clipboard.min.js 即可。
clipboard.min.js 文件上传至服务器，代码中引入（建议放在 head 之间），下面是参考代码：（请根据实际修改文件路径）
「clipboard.js — 不依赖 Flash 的 js 剪贴板插件：https://uxtt.com/37」<script type='text/javascript' src='https://uxtt.com/wp-content/themes/middle/js/clipboard.min.js?ver=2.0.11'</script>
初始化 clipboard 对象
<script type='text/javascript'>
var clipboard = new ClipboardJS('.clipboard');
</script>
注意：clipboard 为关联 class，可根据实际修改。另外新版本构造函数是 ClipboardJS，旧版本是 Clipboard，如果新版本使用 var clipboard = new Clipboard(btn); 会提示 Uncaught TypeError: Illegal constructor 错误。
定义要复制的对象和点击按钮
比如这里要实现点击优惠码 BWH3HYATVBJW 实现复制优惠码并打开指定链接 https://bwh81.net/aff.php?aff=3704&pid=57
搬瓦工最新优惠码：<a class="clipboard" href="https://bwh81.net/aff.php?aff=3704&pid=57" data-clipboard-text="BWH3HYATVBJW" rel="nofollow" target="_blank">BWH3HYATVBJW</a>（点击自动复制优惠码并直达购买页）
注意：
「clipboard.js — 不依赖 Flash 的 js 剪贴板插件：https://uxtt.com/37」- 链接
class="clipboard"中 clipboard 与前面初始化使用名字相对应 '.clipboard'； - 使用 data-clipboard-text="BWH3HYATVBJW" 指定需要复制内容（优惠码）。
下面是实例效果：
搬瓦工最新优惠码：BWH3HYATVBJW（点击自动复制优惠码并直达购买页）
clipboard.js 其它使用例子
clipboard.js 除了用来复制优惠码，还有很多用法，下面列几个。
从另外一个元素复制内容
使用 data-clipboard-target 属性指定被复制内容：
<!-- Target -->
<input id="foo"> 种豆南山下，久在樊笼里，复得返自然。</input>
<!-- Trigger -->
<a class="clipboard" href="javascript:" data-clipboard-target="#foo"> 复制</a>
效果如下：
如果要剪切，加上属性 data-clipboard-action="cut"（剪切属性只支持 input 和 textarea）
clipboard.js 事件
如果想在复制或剪切后进行通知或者回调以告知用户做了什么操作，可以使用 success 和 error 自定义事件来监听和实现自定义逻辑。
var clipboard = new ClipboardJS('.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);
});
可以在演示的时候打开控制台查看调试信息。
clipboard.js 高级用法
可以设置回调方法供 Clipboard 使用：
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
这里 target 接受一个回调函数。同样，text 也支持接受一个回调函数。
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});
清理 Clipboard 对象：
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
过期实例：让网站访客「无意中」领取支付宝红包
原理：手机端访客点击指定链接/按钮，自动复制指定支付宝红包口令，待访客下次打开支付宝时就会领取到你的红包。
代码如下：
<script>
var clipboard = new ClipboardJS('.hongbao', {
text: function() {
return '1024';
}
});
clipboard.on('success', function(e) {
e.clearSelection();
});
</script>
然后在指定链接/按钮或者点击率较高的链接/按钮加上 class="hongbao" 属性即可。
或者再狠一点，点击全站任何链接都会复制：
<script>
var clipboard = new ClipboardJS('a', {
text: function() {
return '1024';
}
});
clipboard.on('success', function(e) {
e.clearSelection();
});
</script>
任何服务均有跑路风险，请注意防范！没有啥绝对好坏！ 备用节点参考：大哥云、万城v-city、飞机云、搬瓦工JMS、极客云……
本文已于 2022-06-19 修改更新，您的宝贵建议请在文章下方评论区留言反馈，谢谢。
Comments：0