首頁  >  文章  >  web前端  >  jQuery插件Zclip實現完美相容個瀏覽器點擊複製內容到剪貼簿_jquery

jQuery插件Zclip實現完美相容個瀏覽器點擊複製內容到剪貼簿_jquery

WBOY
WBOY原創
2016-05-16 16:01:361360瀏覽

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:複製內容後回調函數,可選

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn