clipboard.js使用总结

最近项目中用到点击一个按钮将一个div中的内容复制到剪贴板中的功能

以前还真没有实践过这种功能，现查询了一些资料，有了大概了解:

1. 概述

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中 

https://clipboardjs.com/这是它的官网

2. 使用方式

首先从官网下载下来它的js文件

2.1 引入js文件

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

2.2 通过function复印内容进剪贴板

可以从input、textarea、div中通过copy/cut获取内容目标内容，其HTML的代码通常如下：

<div>hello</div>
<button class="btn">Copy_target</button>

 <script>
    var clipboard = new Clipboard('.btn', {
    // 通过target指定要复印的节点
        target: function() {
                   return document.querySelector('div');
              }//此时div中的内容已经在剪贴板中了
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>