複製到剪貼簿的JS實現--ZeroClipboard (兼解決IE下相容問題)
對於一般技術類的使用者來說這沒什麼,但是對於那些非技術類的人來說,反而會覺得比較麻煩。因此從實用性和提高使用者體驗的角度出發,得給使用者直接複製粘貼到剪下板的功能。今天介紹一個實現此功能的小外掛程式,ZeroClipboard,同時兼討論解決它在IE下不能使用的問題(我用的IE10)。 1、下載jQuery,可自行百度Google。 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可以找到對應的使用方法。 在各大瀏覽器包括Google瀏覽器、Firefox以及一些國產的瀏覽器裡測試都沒問題。但是每次討論到IE,問題就來了,當在IE瀏覽器(我用的IE10)開啟的時候卻出現了問題,點擊沒有效果。而Google裡搜尋也發現其他人也有類似的問題,不明覺厲。然後查看了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"]); }); }); }