細水長流

clipboard.js — 不依赖 Flash 的 js 剪贴板插件

流水

clipboard.js：一个小巧免费 js 剪贴板插件，无需 Flash，无任何依赖，纯 js 实现复制/剪切文本到剪贴板，同时打开指定链接，gzipped 压缩后只有 3KB，实际使用的 clipboard.min.js 约 9KB。

「clipboard.js — 不依赖 Flash 的 js 剪贴板插件：https://uxtt.com/37」

为什么使用 clipboard.js？

写 VPS 主机之类推荐文章，难免会有优惠码优惠券，WordPress 优惠券插件 DRP Coupon 可以实现复制优惠码同时打开链接（打开链接同时复制优惠码），不过需要 flash 支持，加上也不想用 DRP Coupon 管理优惠码……

找到 clipboard.js，几乎可以实现同样功能，但是不需要 flash 支持，一直在用，还不错。

「clipboard.js — 不依赖 Flash 的 js 剪贴板插件：https://uxtt.com/37」

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

clipboard.js 使用方法

主要步骤：引入 clipboard.js，初始化对象，目标链接适配即可。

「clipboard.js — 不依赖 Flash 的 js 剪贴板插件：https://uxtt.com/37」

下载 & 引入 clipboard.js 文件

官网下载 clipboard.js，实际使用 clipboard.min.js 即可。

clipboard.min.js 文件上传至服务器，代码中引入（建议放在 head 之间），下面是参考代码：（请根据实际修改文件路径）

<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 错误。

「clipboard.js — 不依赖 Flash 的 js 剪贴板插件：https://uxtt.com/37」

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

比如这里要实现点击优惠码 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>（点击自动复制优惠码并直达购买页）

注意：

下面是实例效果：

搬瓦工最新优惠码：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>
本文首发于：clipboard.js — 不依赖 Flash 的 js 剪贴板插件-細水長流

本文已于 2022-06-19 修改更新，您的宝贵建议请在文章下方评论区留言反馈，谢谢。

退出移动版