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