1. 程式人生 > >jQuery實現複製到剪下板

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({
<span style="white-space:pre">	</span>path: "../plugins/js/ZeroClipboard.swf",
<span style="white-space:pre">	</span>copy: function () {<span style="white-space:pre">	</span>//複製內容 
<span style="white-space:pre">		</span>return $("#url").text();
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>afterCopy: function () {//複製成功 
<span style="white-space:pre">		</span>alert("已複製到剪貼簿");
<span style="white-space:pre">	</span>}
});
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(254, 254, 242);">其中path是ZeroClipboard.swf在專案中的路徑位置,afterCopy可選。</span>