jQuery外掛程式Zclip實現完美相容個瀏覽器點擊複製內容到剪貼簿_jquery

WEB開發中，要讓使用者複製頁面中的一段代碼、URL地址等資訊，為了避免使用者拖動滑鼠再進行右鍵複製操作而可能出現的差錯，我們可以直接在頁面中放置一個複製按鈕，只需要輕輕一點這個複製按鈕，內容將會被複製，然後使用者可以粘貼到想粘貼的地方。

HTML

首先需要在頁面中載入jquery庫和zclip外掛程式，這兩個檔案已經打好包，歡迎點擊下載。

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.min.js"></script> 

接著我們在頁面中的body部分加入如下代碼：

<textarea id="mytext">請輸入內容</textarea><br/> <a href="#" id="copy_input" class="copy">複製內容</a>

 頁面中放置了一個輸入框textarea，當然也可以是其他html元素，然後就是一個複製按鈕，也可以是連結文本形式。

Javascript

當點擊“複製內容”時，調用zclip外掛程式，並提示複製成功，請看代碼：

$(function(){   $('#copy_input').zclip({     path: 'js/ZeroClipboard.swf',     copy: function(){//複製內容       return $('#mytext').val();     },     afterCopy: function(){//複製成功       $("<span id='msg'/>").insertAfter($('#copy_input')).text('複製成功');     }   }); }); 

值得注意的是如果是複製的內容來自輸入框input、textarea等，copy對象使用：

copy: function(){   return $('#mytext').val(); } 

如果是複製的內容來自頁面元素div、p之類的，copy對象使用：
copy: $('#mytext').text();
這樣就完成了複製內容到剪貼簿的功能。
參數說明
path：swf調用路徑，必須，如js/ZeroClipboard.swf，ZeroClipboard.swf檔案已存在下載包中。
copy：複製的內容，必須，任一字元串，也可以是回呼函數返回的內容
beforeCopy：複製內容前回呼函數，可選
afterCopy：複製內容後回呼函數，可選

以上所述就是本文的全部內容了，希望大家能夠喜歡。