jQuery實現復制到剪切板


前段時間需要做一個點擊一個按鈕,把制定內容復制到剪切板的效果。

對於IE瀏覽器而言,有一簡單的方法,通過 window.clipboardData:

(假如有一個id為copy的按鈕,有一個id為name的輸入框,“text”為固定格式)

$("#copy").click(function () {
  window.clipboardData.setData("text", $("#name").val());
  alert("已復制到剪貼板");
});

 


但是這個方法僅限於IE瀏覽器,其他瀏覽器使用不了,所以不推薦使用。

下面介紹一種兼容主流瀏覽器的方法:jQuery的zclip插件。

1、首先下載一個一個zclip插件,網上有很多下載資源,隨便百度一個,里面主要有兩個文件:jquery.zclip.min、ZeroClipboard.swf。(注意兩個都要導入進去)

2、把這兩個文件都放都項目中去,同時引用js例如:<script src="../plugins/js/jquery.zclip.min.js"></script>(我的js文件都放在根目錄下的plugins文件下的js文件中)

3、下面模擬具體代碼:

<a href="www.baidu.com" id="url">www.baidu.com</a>
<input type="button" value="復 制" id="copy" /> 

點擊“復制”按鈕:

$("#copy").zclip({ path: "../plugins/js/ZeroClipboard.swf", copy: function () {//復制內容 
return $("#url").text(); }, afterCopy: function () {//復制成功 
alert("已復制到剪貼板"); } });

其中path是ZeroClipboard.swf在項目中的路徑位置,afterCopy可選。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM