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

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

除非注明,沙唐桔文章均为原创,本文地址 https://cyhour.com/776/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!

Sublime Text 批量删除文件空白行

不知道为啥,新版本的 WordPress 安装完成后生成的 wp-config.php 文件会被隔行插入一行空行,另外,发现从后台上传本地主题 zip 压缩包进行安装,这个主题的所有文件都会被隔行插入一行空行,这是 bug?我现在用 Sublime Text 3 (和谐版)编辑主题文件,于是找了一下 Sublime Text 删除空行的方法,…
浏览: 97 标签: 

Sublime Text 3 热键失效

今天折腾博客,发现 Sublime Text 3 快速选中多个地方热键(Ctrl+Alt+UP/DOWN)失效,原本以为是老问题:英特尔图形属性占用快捷键,看了一下,并没有。 找了一圈,试了几个工具,没找到是哪个程序快捷键冲突。然后尝试使用 Windows Hotkey Explorer 找找。MD,这货安装完,打开,屏幕噼里啪啦…
浏览: 157 标签:  ,  ,  , 
浏览: 99 标签:  ,  , 

Comments:2

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

    2018.09.12 15:15 # 回复
    1楼

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息