WEB開發(fā)中,要讓用戶復制頁面中的一段代碼、URL地址等信息,為了避免用戶拖動鼠標再進行右鍵復制操作而可能出現(xiàn)的差錯,我們可以直接在頁面中放置一個復制按鈕,只需要輕輕一點這個復制按鈕,內(nèi)容將會被復制,然后用戶可以粘貼到想粘貼的地方。

HTML
首先需要在頁面中載入jquery庫和zclip插件,這兩個文件已經(jīng)打好包,歡迎點擊下載。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.min.js"></script>
接著我們在頁面中的body部分加入如下代碼:
<textarea id="mytext">請輸入內(nèi)容</textarea><br/> <a href="#" id="copy_input" class="copy">復制內(nèi)容</a>
頁面中放置了一個輸入框textarea,當然也可以是其他html元素,然后就是一個復制按鈕,也可以是鏈接文本形式。
Javascript
當點擊“復制內(nèi)容”時,調(diào)用zclip插件,并提示復制成功,請看代碼:
$(function(){ $('#copy_input').zclip({ path: 'js/ZeroClipboard.swf', copy: function(){//復制內(nèi)容 return $('#mytext').val(); }, afterCopy: function(){//復制成功 $("<span id='msg'/>").insertAfter($('#copy_input')).text('復制成功'); } }); }); 值得注意的是如果是復制的內(nèi)容來自輸入框input、textarea等,copy對象使用:
copy: function(){ return $('#mytext').val(); } 如果是復制的內(nèi)容來自頁面元素div、p之類的,copy對象使用:
copy: $('#mytext').text();
這樣就完成了復制內(nèi)容到剪貼板的功能。
參數(shù)說明
path:swf調(diào)用路徑,必須,如js/ZeroClipboard.swf,ZeroClipboard.swf文件已存在下載包中。
copy:復制的內(nèi)容,必須,任意字符串,也可以是回調(diào)函數(shù)返回的內(nèi)容
beforeCopy:復制內(nèi)容前回調(diào)函數(shù),可選
afterCopy:復制內(nèi)容后回調(diào)函數(shù),可選
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
|
新聞熱點
疑難解答