復制到剪貼板的JS實現--ZeroClipboard （兼解決IE下兼容問題）

復制到剪貼板的JS實現--ZeroClipboard （兼解決IE下兼容問題）

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

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

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

　　2、下載ZeroClipboard，Zero Clipboard的官方地址：http://zeroclipboard.org/，github地址：https://github.com/zeroclipboard/ZeroClipboard

　　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會提示用戶是否允許訪問剪貼板。

　　以上所有代碼僅寫出了關鍵核心的部分，如有問題，歡迎交流吐槽！