說到點選按鈕“複製到剪貼簿",大家都可能用過，但是之前的實現方不是隻支援某些瀏覽器，就是要在網頁內嵌swf(Flash)檔案。
   這兩種方法：第一種不能很好的相容多數瀏覽器，第二種方式下開發人員可能會擔心Flash的安全性問題。
   現在出現了一種新的實現方式：clipboard.js。只要給頁面引入一個js檔案，並且在頁面上做一定處理，就可
   實現全瀏覽器相容的“一鍵複製到剪貼簿”的功能。
目錄

  


   
萬能的一鍵複製到剪貼簿支援IE火狐谷歌及移動版瀏覽器
    


     

      


       
目錄

       
clipboardjs
        
 
         
下載clipboardjs
 
 
         
使用clipboardjs
 
         
不止是複製還有更多
 
         
瀏覽器支援
 
         
以防萬一
 
         
腳註
 
        
 

      

clipboard.js


      

  
       
無需Flash，無需框架； 
 僅需3KB的壓縮版JS ，就可實現華麗的剪貼簿複製操作 ——  [clipboardjs.com]

      
clipboard.js是一個輕量級的“一鍵複製到貼上板”工具，您只需要將其引入您的專案，並在對應位置呼叫即可。
下載clipboard.js
最直接的方式就是進入官方主頁
 
下載 

或者直接點選https://github.com/zenorocha/clipboard.js/archive/master.zip。

使用clipboard.js

clipboard.js現在可支援文字框text和文字域text area兩種方式的貼上板複製：
1. 使用文字框作為複製內容的來源
(1).在你的頁面引入clipboard.js

<script type="text/javascript" src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
<script type
 
 = "text/javascript"> 
       //載入clipboadr.js
         //.btn 按class繫結功能按鈕
         var clipboard = new Clipboard('.btn');
       //複製成功觸發的事件
        clipboard.on('success', function(e) {
        //自定義事件區域
            console.log(e);
        });
        //複製失敗觸發的事件
        clipboard.on('error', function(e) {
        //自定義事件區域
            console.log(e);
        });
<script/>
(2)在你的頁面上加入如下程式碼：
<!-- 要複製的目標 -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- 按鈕及驅動 -->
    <!--保證button clipboard-target 和 input id 一致-->
<button class="btn" data-clipboard-action="copy" 
    data-clipboard-target="#foo">複製到剪貼簿</button>

    
  

(3)開啟你的瀏覽器，享受勝利果實！

2.使用文字域作為複製內容的來源
(1).在你的頁面引入clipboard.js2

<script type="text/javascript" src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
<script type = "text/javascript"> 
       //載入clipboadr.js
         //.btn 按class繫結功能按鈕
         var clipboard = new Clipboard('.btn');
       //複製成功觸發的事件
        clipboard.on('success', function(e) {
        //自定義事件區域
            console.log(e);
        });
        //複製失敗觸發的事件
        clipboard.on('error', function(e) {
        //自定義事件區域
            console.log(e);
        });
<script/>

(2)在你的頁面上加入如下程式碼：

<!-- 要複製的目標 -->
<textarea id="bar">hello, ClipBoard JS !</textarea>
    <!-- 按鈕及驅動 -->
        <!--保證button clipboard-target 和 input id 一致-->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">複製到剪貼簿</button>

(3)開啟你的瀏覽器，享受勝利果實！

不止是複製，還有更多…

其實clipboard.js還可以進行剪下操作，而且它的可操作物件不止於上邊介紹的兩種，只不過官網上主推這兩種方式。如需瞭解clipboard.js更多功能，請進https://github.com/zenorocha/clipboard.js/archive/master.zip 3下載原始碼及DEMO檢視詳細用法。

瀏覽器支援

clipboard.js支援大多數瀏覽器，支援列表如下：

列表1	列表2	列表3
Chorme 42+	Microsoft Edge 12+	FireFox 41+
IE 9+	Opera 29+	Safari 10+

以防萬一

如果你覺得不確定你的瀏覽器環境是否能使用clipboard.js，官方也給出了對應的檢測方法:
只需在<script></script>中加入這個：

alert(Clipboard.isSupported()); 

如果彈出true，那麼你就可以放心大膽地使用clipboard.js在你的專案中了。

腳註

1. 這裡使用的是官方給的連結. ↩
2. 這裡使用的是官方給的連結. ↩
3. 這裡使用的是官方給的連結. ↩