關於clipboard插件的使用問題

概述：

　　clipboard.js是一款輕量級的實現復制文本到剪貼板功能的JavaScript插件。通過該插件可以將輸入框，文本域，DIV元素中的文本等文本內容復制到剪貼板中 
　　clipboard.js支持主流的瀏覽器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+; 

使用方式：

　　引入js文件：

<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中起作用

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

　　textare 
　　和上面的主要區別只是input和textare不同

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

　　div 
　　和上面的主要區別只是input和div不同

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

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

 　　<script>
       // button的class的值
        var clipboard = new Clipboard('.btn');
        clipboard.on('success', function(e) {
            console.log(e);
        });

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

通過function 要復印的內容

　　通過target，text的function復印內容

　　　　通過target的function復印內容 

　　　　通過target指定要復印的節點，這里返回值是‘hello’

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

    <script>
    var clipboard = new Clipboard('.btn', {
    // 通過target指定要復印的節點
        target: function() {
                   return document.querySelector('div');
              }
    });

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

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

　　通過text的function復印內容 
　　text的function指定的復印內容，這里返回‘to be or not to be’

 <button class="btn">Copy</button>
 <script>
    var clipboard = new Clipboard('.btn', {
    // 點擊copy按鈕，直接通過text直接返回復印的內容
        text: function() {
            return 'to be or not to be';
        }
    });

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

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

通過屬性返回復印的內容

　　通過data-clipboard-text屬性返回復印的內容

　　　　單節點 

　　　　通過id指定節點對象，並做為參數傳送給Clipboard。這里的返回值的內容是data-clipboard-text的內容

　　　　// 通過id獲取復制data-clipboard-text的內容 
 2　　　 <div id="btn" data-clipboard-text="1">
        <span>Copy</span>
　　　</div>

　　 <script>
      var btn = document.getElementById('btn');
      var clipboard = new Clipboard(btn);

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

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

　　多節點 
　　通過button返回所有button按鈕，並做為參數傳送給Clipboard。每個按鈕被點擊時，返回值的內容是其對應的data-clipboard-text的內容，分別是1，2，3

//  多節點獲取button的data-clipboard-text值
<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>
<script>
    var btns = document.querySelectorAll('button');
    var clipboard = new Clipboard(btns);

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

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

　　多節點 
　　通過class獲取所有button按鈕，並做為參數傳送給Clipboard。每個按鈕被點擊時，返回值的內容是其對應的data-clipboard-text的內容，分別是1，2，3

//   通過class注冊多個button，獲取data-clipboard-text的值
<button class="btn" data-clipboard-text="1">Copy</button>
<button class="btn" data-clipboard-text="2">Copy</button>
<button class="btn" data-clipboard-text="3">Copy</button>
<script>
    var clipboard = new Clipboard('.btn');

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

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

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