关于clipboard插件的使用问题

概述：

　　clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中
　　clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

使用方式：

　　引入js文件：

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

　　clipboard复印内容的方式有：
　　　　- 从target复印目标内容
　　　　- 通过function 要复印的内容
　　　　- 通过属性返回复印的内容

从target复印目标内容

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

　　input
　　data-clipboard-target指向复印节点，这里指input的目标id
　　data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是copy。cut只能在input和textare中起作用

1 <input id="foo" type="text" value="hello">
2 <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

　　textare
　　和上面的主要区别只是input和textare不同

1 <textarea id="bar">hello</textarea> 
2 <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>

　　div
　　和上面的主要区别只是input和div不同

1 <div>hello_div</div>
2 <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

　　以上的插件的初始化JS代码都是相同：

 1  　　<script>
 2        // button的class的值
 3         var clipboard = new Clipboard('.btn');
 4         clipboard.on('success', function(e) {
 5             console.log(e);
 6         });
 7 
 8         clipboard.on('error', function(e) {
 9             console.log(e);
10         });
11     </script>

通过function 要复印的内容

　　通过target，text的function复印内容

　　　　通过target的function复印内容

　　　　通过target指定要复印的节点，这里返回值是‘hello’

 1 　　 <button class="btn">Copy_target</button>
 2     <div>hello</div>
 3 
 4     <script>
 5     var clipboard = new Clipboard('.btn', {
 6     // 通过target指定要复印的节点
 7         target: function() {
 8                    return document.querySelector('div');
 9               }
10     });
11 
12     clipboard.on('success', function(e) {
13         console.log(e);
14     });
15 
16     clipboard.on('error', function(e) {
17         console.log(e);
18     });
19     </script>

　　通过text的function复印内容
　　text的function指定的复印内容，这里返回‘to be or not to be’

 1  <button class="btn">Copy</button>
 2  <script>
 3     var clipboard = new Clipboard('.btn', {
 4     // 点击copy按钮，直接通过text直接返回复印的内容
 5         text: function() {
 6             return 'to be or not to be';
 7         }
 8     });
 9 
10  clipboard.on('success', function(e) {
11      console.log(e);
12  });
13 
14  clipboard.on('error', function(e) {
15      console.log(e);
16  });

通过属性返回复印的内容

　　通过data-clipboard-text属性返回复印的内容

　　　　单节点

　　　　通过id指定节点对象，并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容

 1 　　　　// 通过id获取复制data-clipboard-text的内容 
 2　　　 <div id="btn" data-clipboard-text="1">
 3         <span>Copy</span>
 4 　　　</div>
 5 
 6 　　 <script>
 7       var btn = document.getElementById('btn');
 8       var clipboard = new Clipboard(btn);
 9 
10       clipboard.on('success', function(e) {
11         console.log(e);
12       });
13 
14       clipboard.on('error', function(e) {
15         console.log(e);
16       );
17     </script>

　　多节点
　　通过button返回所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3

 1 //  多节点获取button的data-clipboard-text值
 2 <button data-clipboard-text="1">Copy</button>
 3 <button data-clipboard-text="2">Copy</button>
 4 <button data-clipboard-text="3">Copy</button>
 5 <script>
 6     var btns = document.querySelectorAll('button');
 7     var clipboard = new Clipboard(btns);
 8 
 9     clipboard.on('success', function(e) {
10         console.log(e);
11     });
12 
13     clipboard.on('error', function(e) {
14         console.log(e);
15     });
16 </script>

　　多节点
　　通过class获取所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3

 1 //   通过class注册多个button，获取data-clipboard-text的值
 2 <button class="btn" data-clipboard-text="1">Copy</button>
 3 <button class="btn" data-clipboard-text="2">Copy</button>
 4 <button class="btn" data-clipboard-text="3">Copy</button>
 5 <script>
 6     var clipboard = new Clipboard('.btn');
 7 
 8     clipboard.on('success', function(e) {
 9         console.log(e);
10     });
11 
12     clipboard.on('error', function(e) {
13         console.log(e);
14     });
15 </script>

原文：http://blog.csdn.net/hry2015/article/details/70941912