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/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🔞:Netflix 奈飞 YouTube 合租免费节点Telegram 频道

使用 rclone 将 Google Drive 文件同步至 OneDrive

前几天上了博友「灵尘居」的 Office 365 车,1T OneDrive 到手,手机照片一直喂 Google AI,挺方便的,以前还会同步一份到家里的垃圾西数 NAS,不过并不太自动,后来就懒得弄了。 Google 虽然是大厂,但是数据只有一份,还是怕怕,多一个备份不是坏事。苹果 iCloud 不错,但是贼贵,况且我只有一个…
浏览: 52 标签:  ,  , 

尼康 D7100 中文使用说明书 高清 PDF 电子版免费下载

尼康 D7100 说明书是一份介绍详细尼康 D7100 单反官方教程,推荐购买了 D7100 单反博友下载保存参考,以便随时查看一些常用按键操作和使用技巧。 尼康 D7100 简介 尼康 D7100 搭载先进的对象捕捉性能和成像性能,能够忠实还原拍摄细节。高密度的 51 点自动对焦系统准确捕捉目标对象并进行跟踪,…

全网热门公共 BitTorrent Tracker 列表合集 加速BT下载

BT 下载速度取决于其他下载同一资源的用户上传速度。做种「指上传文件数据给其他 BT 用户的行为」用户越多,你的下载速度越快!如果资源没人提供上传,就会完全没有下载速度,而做种用户靠 Peer、DHT、Tracker 获得。 Tracker 是什么? BT 下载的文件都是其他用户上传给你的。 BT 下载速度…

换域名?改固定链接?

去年底注册了个短域名,虽然非主流,但是胜在够短,两字母,还没有溢价。一直寻思着把它转移到 Cloudflare,换到博客使用,无奈 Google Adsense 一直没能折腾审核通过。 WordPress 修改固定链接? 以前听说 postname 更有利于 SEO,曾经试过人工翻译。后来嫌麻烦,干脆只用 /%post_id%/,后面 .…
浏览: 41 标签:  ,  ,  , 
浏览: 33 标签:  ,  , 

Comments:2

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

    2018.09.12 15:15 # 回复
    1楼

发表留言

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