前段時間需要做一個點擊一個按鈕,把制定內容復制到剪切板的效果。
對於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可選。