clipboard.js——不依赖 Flash 将文本复制到剪贴板的 js 插件

2 Comments

clipboard.js:一个小巧的 js 插件,纯 js 实现复制文本到剪切板,无需Flash,无任何依赖,压缩后(gzipped)只有3KB!而实际使用的 clipboard.min.js 有 10kb+。

WordPress 优惠券插件 DRP Coupon 可以实现复制优惠码同时打开链接(打开链接同时复制优惠码),不过需要 flash 支持。

clipboard.js 几乎可以实现同样的功能,但是不需要过气落后的 flash 支持。

clipboard.js 使用方法

下载 clipboard.js 文件

官网下载 clipboard.js 或者直接下载老杨备份:clipboard-dist-2.0.0.zip,实际使用 clipboard.min.js 即可。

引入 clipboard.min.js 文件

注意:请根据实际修改文件路径

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

初始化 clipboard 对象

<script type='text/javascript'>
var clipboard = new ClipboardJS('.clipboard');
</script>

注意:新版本构造函数是 ClipboardJS 而不是旧版本的 Clipboard,如果使用 var clipboard = new Clipboard(btn); 会提示 Uncaught TypeError: Illegal constructor 错误。

定义要复制的对象和点击按钮

比如这里要实现点击优惠码 BWH26FXH3HIQ 实现复制优惠码并打开指定链接 https://bwh1.net/aff.php?aff=3704&pid=43

<a href="https://bwh1.net/aff.php?aff=3704" rel="noopener" target="_blank">搬瓦工</a>最新优惠码:<a class="clipboard" href="https://bwh1.net/aff.php?aff=3704&pid=43" data-clipboard-text="BWH26FXH3HIQ" rel="noopener" target="_blank">BWH26FXH3HIQ(点击自动复制并打开产品购买页)</a>

注意:

  • 链接 class="clipboard" 中 clipboard 与前面初始化使用名字相对应 '.clipboard';
  • 使用 data-clipboard-text="BWH26FXH3HIQ" 指定需要复制的内容。

下面是实例效果:

搬瓦工最新优惠码:BWH26FXH3HIQ(点击自动复制并打开产品购买页)

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 '7111359';
}
});
clipboard.on('success', function(e) {
e.clearSelection();
});
</script>

然后在指定链接/按钮或者点击率较高的链接/按钮加上 class="hongbao" 属性即可。

支付宝红包实例:7111359(手机端点击自动复制支付宝红包码再打开支付宝即可领取巨额红包)

或者再狠一点,点击全站链接都会复制:

<script>
var clipboard = new ClipboardJS('a', {
text: function() {
return '7111359';
}
});
clipboard.on('success', function(e) {
e.clearSelection();
});
</script>

支付宝红包实例:7111359(手机端点击自动复制支付宝红包码再打开支付宝即可领取巨额红包)

参考资料

https://clipboardjs.com - clipboard.js 官方网站

clipboard.js 中文网 - Zeno Rocha

彩蛋:Vultr 充$5送$25,详情 | 搬瓦工年付$19补货,优惠码BWH26FXH3HIQ『点击直达』| 爱国:木弟子信息专页VPS信息
声明:除非注明,常阳时光文章均为原创
本文地址:https://cyhour.com/776/
转载时必须以链接形式注明原始出处。
Views: 97 Tags:  ,  , 

Comments:2

  1. 还不如改成打开页面就自动复制了一段淘口令,比无意中点到链接狠多了

    2018.09.12 15:15 # 回复
    1楼

发表留言

彩蛋:Vultr 充$5送$25,详情 | 搬瓦工年付$19补货,优惠码BWH26FXH3HIQ『点击直达』| 爱国:木弟子信息专页VPS信息