jQuery插件Zclip實(shí)現(xiàn)完美兼容個(gè)瀏覽器點(diǎn)擊復(fù)制內(nèi)容到剪貼板

更新時(shí)間：2015年04月30日 17:50:58 投稿：hebedich

本文將結(jié)合實(shí)例講解如何使用一款基于jQuery的插件——Zclip來(lái)實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板的功能。其實(shí)IE上有個(gè)方法可以實(shí)現(xiàn)點(diǎn)擊復(fù)制，但是由于只是IE獨(dú)有，所以我們不提倡。而Zclip是利用一個(gè)隱藏的flash文件來(lái)完成復(fù)制的功能，關(guān)鍵是它兼容當(dāng)前各主流瀏覽器。

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

HTML

首先需要在頁(yè)面中載入jquery庫(kù)和zclip插件，這兩個(gè)文件已經(jīng)打好包，歡迎點(diǎn)擊下載。

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

接著我們?cè)陧?yè)面中的body部分加入如下代碼：

<textarea id="mytext">請(qǐng)輸入內(nèi)容</textarea><br/> 
<a href="#" id="copy_input" class="copy">復(fù)制內(nèi)容</a>

頁(yè)面中放置了一個(gè)輸入框textarea，當(dāng)然也可以是其他html元素，然后就是一個(gè)復(fù)制按鈕，也可以是鏈接文本形式。

Javascript

當(dāng)點(diǎn)擊“復(fù)制內(nèi)容”時(shí)，調(diào)用zclip插件，并提示復(fù)制成功，請(qǐng)看代碼：

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

值得注意的是如果是復(fù)制的內(nèi)容來(lái)自輸入框input、textarea等，copy對(duì)象使用：

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

如果是復(fù)制的內(nèi)容來(lái)自頁(yè)面元素div、p之類的，copy對(duì)象使用：
copy: $('#mytext').text();
這樣就完成了復(fù)制內(nèi)容到剪貼板的功能。
參數(shù)說(shuō)明
path：swf調(diào)用路徑，必須，如js/ZeroClipboard.swf，ZeroClipboard.swf文件已存在下載包中。
copy：復(fù)制的內(nèi)容，必須，任意字符串，也可以是回調(diào)函數(shù)返回的內(nèi)容
beforeCopy：復(fù)制內(nèi)容前回調(diào)函數(shù)，可選
afterCopy：復(fù)制內(nèi)容后回調(diào)函數(shù)，可選

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: