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/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

利用 Google Analytics 追踪 WordPress 站内搜索关键词

Google分析(Google Analytics)是一个由 Google 所提供的网站流量统计服务。Google 分析(Analytics)现在是互联网上使用最广泛的网络分析服务。 利用 Google Analytics 追踪 WordPress 站内搜索关键词 优化内容 如果网站/博客在 Google Analytics 流量统计,利用 Google Analytics 追踪 W…

Google Analytics 异步请求(服务端请求)

感谢伟大的祖国,使得好好的 Google,必须折腾一番才能好好的用起来。Google 搜索如此,Google Analytics 肯定也不例外(网上据说 Google Analytics 没有被屏蔽)。 Google Analytics 支持服务端发送统计信息(via:Jerry Qu),而通过服务端统计可以解决 Google Analytics 连接缓慢问题,提高页面…
浏览: 112 标签:  ,  , 

Gravatar 头像被墙及解决方案 Gravatar 头像国内镜像地址大全

Gravatar 头像真是一言难尽,时而正常时而抽风时而无法访问……就一个 Gravatar 头像,这有啥好强(现代通假字)的呢?(据说是被其它服务连累?) 解决办法 - 调用 ssl/cn 头像链接 历史解决办法:调用 ssl 头像链接——https还是没被墙的,而且速度还不错,直接调用这个最简单了。主题 functi…
浏览: 32 标签:  ,  , 

WordPress 5.0+ 禁用 Gutenberg & WordPress 5.8+ 禁用 Widget 块编辑器

2018.12.06,WordPress 5.0 发布,代号 Bebo。最大的亮(黑)点就是正式引入新的基于块(block-based)的编辑器 —— Gutenberg 编辑器,以及新的默认主题 —— Twenty Nineteen。 WordPress 5.0+ 禁用 Gutenberg 编辑器 第一时间升级,打开文章编辑,一股说不出的杯具感在心头……变化太大,心累…
浏览: 149 标签:  ,  ,  , 
浏览: 154 标签:  ,  , 

Comments:2

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

    2018.09.12 15:15 # 回复
    1楼

发表留言

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