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

來源:互聯網
上載者:User

複製到剪貼簿的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"]);            });        });    }             

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.