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

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

　　相信絕大多數人都遇到過這樣的功能實現，「複製」或者「複製到剪貼板」這樣的功能。可是因爲各大瀏覽器的實現方案不同，致使幾乎沒有統一的實現這樣功能的方案。而被各大程序猿喜歡的jQuery也沒有相似的方法或者函數來實現這一功能。包括博客園這樣的技術博客區對代碼的複製，也沒有直接複製到剪貼板，須要用戶本身去手動ctrl+c。以下：

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

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

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

　　三、添加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 -->

　　四、html代碼。

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

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

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