zeroclipboard 粘贴板的应用示例，兼容 Chrome、IE等多浏览器

本文主要是介绍zeroclipboard 粘贴板的应用示例，兼容 Chrome、IE等多浏览器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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> 
 