複製到剪貼簿的JS實現--ZeroClipboard （兼解決IE下相容問題）

　　相信絕大多數人都遇到過這樣的功能實現，“複製”或者“複製到剪貼簿”這樣的功能。但是由於各大瀏覽器的實現方案不一樣，導致幾乎沒有統一的實現這樣功能的方案。而被各大程式猿喜歡的jQuery也沒有類似的方法或者函式來實現這一功能。包括部落格園這樣的技術部落格區對程式碼的複製，也沒有直接複製到剪貼簿，需要使用者自己去手動ctrl+c。如下：

　　對於一般技術類的使用者來說這沒什麼，但是對於那些非技術類的人來說，反而會覺得比較麻煩。因此從實用性和提高使用者體驗的角度出發，得給使用者直接複製貼上到剪下板的功能。今天介紹一個實現此功能的小外掛，ZeroClipboard，同時兼討論解決它在IE下不能使用的問題（我用的IE10）。

　　1、下載jQuery，可自行百度谷歌。

　　3、新增js庫。

<script src="jQuery.js" type="text/javascript"></script>
<script src="ZeroClipboard.js" type="text/javascript"></script>
<script src="clip.js" type="text/javascript"></script><!-- 你測試或者使用的js -->

　　4、html程式碼。

<a title="點選複製當前連結"
 
 href="javascript:void(0);" data-clipboard-text="貼上內容" id="copy"></a>
<!-- 其中id用於js選擇器使用，data-clipboard-text用於儲存你要貼上的內容-->

　　5、JS程式碼

var client = new ZeroClipboard(document.getElementById("copy"));
client.on("ready", function(readyEvent) {
    client.on("aftercopy", function(event) {
       alert(
 
"複製成功，地址為: " + event.data["text/plain"]);
    });
});    

　　好了，醬紫功能就完成了。效果如下：

      當然了，我這裡只是貼上了我寫死的內容，你完全可以根據你的需求來複制內容到剪貼簿使用者輸入的內容或者其它內容。這你可以根據官方的API可以找到對應的使用方法。

　　在各大瀏覽器包括谷歌瀏覽器、火狐以及一些國產的瀏覽器裡測試都沒問題。但是每次討論到IE，問題就來了，當在IE瀏覽器（我用的IE10）開啟的時候卻出現了問題，點選沒有效果。而谷歌裡搜尋也發現其他人也有類似的問題，不明覺厲。然後查看了IE實現複製到剪貼簿的實現方法，並重新優化了下上面的JS程式碼，相容了IE。修改過後的JS程式碼如下：

if(window.clipboardData){
               //for IE
        var copyBtn = document.getElementById("copy");
        copyBtn.onclick = function(){ 
            var text = $("#copy").attr("data-clipboard-text");
            window.clipboardData.setData('text',text); 
            alert("複製成功，地址為： " + text);
        } 
    }else{
        var client = new ZeroClipboard(document.getElementById("copy"));
        client.on("ready", function(readyEvent) {
            client.on("aftercopy", function(event) {
                alert("複製成功，地址為: " + event.data["text/plain"]);
            });
        });
    }            

　　OK，搞定！現在在IE裡也能正常使用了。效果如下：

　　不過在IE中出於安全考慮，IE會提示使用者是否允許訪問剪貼簿。