clipboard.js-纯JS实现复制内容到剪贴板上，无Flash

在谷歌Chrome、微软Edge 和苹果 Safari 等都陆续宣布停止支持Flash插件的情况下，clipboard.js 实现了纯JS复制到剪贴板，无Flash， 压缩后只有3KB大小，还无需要依赖第三方库。

安装

你可以通过 npm 来安装它。

npm install clipboard --save

如果你不使用包管理，仅需要下载一个ZIP 文件。

使用方法

1.HTML代码

<button class="btn">点击复制</button>

2.引用clipboard.js

<script src="dist/clipboard.min.js"></script>

3.然后你需要通过传入一个DOM选择器或HTML 元素, 或者 HTML 元素数组作为参数，来实例化对象。

new Clipboard('.btn');

实例1代码：

    <button class="btn">点击复制</button>
    <script src="dist/clipboard.min.js"></script>
    <script>
    var clipboard = new ClipboardJS('.btn', {
        text: function() {
            return '复制的内容';
        }
    });
    </script>

以上就是基本实现了点击复制内容的功能了。这就结束了吗？当然没有

clipboard.js 还支持HTML5的DATA属性来提高可用性

data-clipboard-targe --- 从另一个元素复制或剪切文本

data-clipboard-action  --- 属性来指明你想要复制还是剪切内容。默认为 (copy)

实例2代码：

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="copy">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

以上码会实现复制 input 中的 value值。

另外需要知道的是 data-clipboard-action 属性为剪切(cut)时只支持对 input 和 textarea 元素的内容剪切。

参数

• container：设置获得焦点的元素

  //如果在 Bootstrap 模态框（Modals）中使用，或是在其他修改焦点的类库中使用。
  //你会希望将获得焦点的元素设置为 container 属性的值。
  new Clipboard('.btn', {
      container: document.getElementById('modal')
  });

方法

• destroy()：清理事件以及创建的对象

  var clipboard = new Clipboard('.btn');
  clipboard.destroy();

事件

• success：触发success事件

  clipboard.on('success', function(e) {
      console.info('Action:', e.action);
      console.info('Text:', e.text);
      console.info('Trigger:', e.trigger);
  
      e.clearSelection();
  });

• error：触发error事件

  clipboard.on('error', function(e) {
      console.error('Action:', e.action);
      console.error('Trigger:', e.trigger);
  });