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 — 不依赖 Flash 的 js 剪贴板插件:https://uxtt.com/37」主要步骤:引入 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>
本文已于 2022-06-19 修改更新,您的宝贵建议请在文章下方评论区留言反馈,谢谢。
Comments:0