zeroclipboard單個復制按鈕和多個復制按鈕的實現方法

最近網站改版想讓復制代碼功能在多個瀏覽器上都可以實現，最近看網上不少說我們的代碼復制功能不好用的，我們最近將會增加代碼高亮等功能，希望大家多多支持我們 zeroclipboard是一個跨瀏覽器的庫類 它利用 Flash 進行復制，所以只要瀏覽器裝有 Flash 就可以運行，而且比 IE 的 document.execCommand("Copy") 更加靈活。
需要使用到的資源下載地址：ZeroClipboard.1.7

zeroclipboard實現多瀏覽器復制到粘貼板功能（單個復制按鈕和多個復制按鈕） 為了更好的用戶體驗，現在很多網站中文本框的內容只需要點擊復制按鈕這樣就能把內容復制到粘貼板了；

出于兼容性的考慮，基本上都是通過zeroclipboard來實現.首先要下載zeroclipboard，解壓后把ZeroClipboard.js和ZeroClipboard.swf、ZeroClipboard10.swf(“為了flash10”)放到項目中，可以通過ZeroClipboard.setMoviePath( '/ZeroClipboard.swf' )方法來加載swf;
下面是整理的代碼（也是通過 網上查找整理的）

（單個復制按鈕）：

html:

復制代碼?代碼如下: <input type="text" value="text" id="copy_txt"/><a href="javascirpt:;" id="copy_btn">復制</a>
<script language="JavaScript">
??? ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );? //和html不在同一目錄需設置setMoviePath
??? ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
??? var clip = new ZeroClipboard.Client();?? //創建新的Zero Clipboard對象
??? clip.setText( '' ); // will be set later on mouseDown?? //清空剪貼板
??? clip.setHandCursor( true );????? //設置鼠標移到復制框時的形狀
??? clip.setCSSEffects( true );????????? //啟用css
??? clip.addEventListener( 'complete', function(client, text) {???? //復制完成后的監聽事件
????????? alert("aa")??????
????????? clip.hide();????????????????????????????????????????? // 復制一次后，hide()使復制按鈕失效，防止重復計算使用次數
???? } );
?? clip.addEventListener( 'mouseDown', function(client) {
????????? clip.setText( document.getElementById('copy_txt').value );
??? } );
??? clip.glue( 'copy_btn' );
</script>

多個復制按鈕：

復制代碼?代碼如下:
<input type="text" value="text" id="copy_txt0"/><a href="javascirpt:;" id="copy_btn0" data='0' class="copyBtn">復制</a>
<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1' class="copyBtn">復制</a>
<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2' class="copyBtn">復制</a>
<script language="JavaScript">
$(".copyBtn").each(function(i){
??????? var id = $(this).attr('data');
??????? var clip=null;
??????? clip = new ZeroClipboard.Client();
??????? ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );? //和html不在同一目錄需設置setMoviePath
??????? ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
??????? clip.setHandCursor( true );
??????? clip.setText( $("#copy_txt"+id).val() );
??????? clip.addEventListener('complete', function (client, text) {
????????? alert( "恭喜復制成功" );
??????? });
??????? clip.glue( 'copy_btn'+id);
? });
</script>

注意： clip.setText( $("#copy_txt"+id).val() );如果是獲取div中的內容， 一般用clip.setText( $("#copy_txt"+id).text() );或clip.setText( $("#copy_txt"+id).html() );

總結

以上是生活随笔為你收集整理的zeroclipboard 粘贴板的应用示例， 兼容 Chrome、IE等多浏览器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。