快捷導(dǎo)航

zeroclipboard 單個(gè)復(fù)制按鈕和多個(gè)復(fù)制按鈕的實(shí)現(xiàn)方法

更新時(shí)間：2014年06月14日 02:38:56 投稿：mdxy-dxy

最近網(wǎng)站改版想讓復(fù)制代碼功能在多個(gè)瀏覽器上都可以實(shí)現(xiàn)，最近看網(wǎng)上不少說我們的代碼復(fù)制功能不好用的，我們最近將會增加代碼高亮等功能，希望大家多多支持我們

zeroclipboard是一個(gè)跨瀏覽器的庫類它利用 Flash 進(jìn)行復(fù)制，所以只要瀏覽器裝有 Flash 就可以運(yùn)行，而且比 IE 的 document.execCommand("Copy") 更加靈活。

zeroclipboard下載地址：http://www.dbjr.com.cn/jiaoben/24961.html

zeroclipboard實(shí)現(xiàn)多瀏覽器復(fù)制到粘貼板功能（單個(gè)復(fù)制按鈕和多個(gè)復(fù)制按鈕）為了更好的用戶體驗(yàn)，現(xiàn)在很多網(wǎng)站中文本框的內(nèi)容只需要點(diǎn)擊復(fù)制按鈕這樣就能把內(nèi)容復(fù)制到粘貼板了；

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

（單個(gè)復(fù)制按鈕）：

html:

復(fù)制代碼代碼如下:

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

多個(gè)復(fù)制按鈕：

復(fù)制代碼代碼如下:

<input type="text" value="text" id="copy_txt0"/><a href="javascirpt:;" id="copy_btn0" data='0' class="copyBtn">復(fù)制</a>
<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1' class="copyBtn">復(fù)制</a>
<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2' class="copyBtn">復(fù)制</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不在同一目錄需設(shè)置setMoviePath
        ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
        clip.setHandCursor( true );
        clip.setText( $("#copy_txt"+id).val() );
        clip.addEventListener('complete', function (client, text) {
          alert( "恭喜復(fù)制成功" );
        });
        clip.glue( 'copy_btn'+id);
  });
</script>