使用Zeroclipboard实现复制功能

       网页开发中需要实现复制功能时，在网上找到的诸多简单的代码（document.execCommand("Copy")）似乎大多数只能在IE下实现，并不能在Chrome等当下主流浏览器下实现。要在这些主流浏览器实现复制功能，就可以用到下面介绍的方法：使用一个跨浏览器的库类 Zero Clipboard。

Zero Clipboard 的实现原理 

Zero Clipboard 利用 Flash 进行复制，之前有 Clipboard Copy 解决方案，其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进，用了一个透明的 Flash ，让其漂浮在按钮之上，这样其实点击的不是按钮而是 Flash ，也就可以使用 Flash 的复制功能了。 

如何使用 Zero Clipboard 

首先下载 Zero Clipboard ，并解压缩。其中需要两个文件：ZeroClipboard.js 和 ZeroClipboard.swf ，将这两个文件放入到你的项目中。

在网上的教程中，ZeroClipboard的使用实例是这样子的。

实现单个复制按钮：

<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' );//使该flash浮于改ID的元素上

</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>

但在实际使用中，多个复制按钮的实现会出现小问题，这里我总结了几点个人使用心得。

1.在该例中，每次调用定义clip的代码都会自动生成一个DIV，其中嵌套一个embed元素，我不太懂，但是觉得应该这就是和flash10相关联的东西。通过此方法，多次调用就会生成多个DIV，且embed都是可点击实现复制功能的类似按钮，多了之后会对点击页面其他元素造成影响。我采用的解决方法是页面只定义一次clip，初次点击复制按钮时再具体生成。此后其他的复制按钮均使用该embed（因为我的页面布局比较确定，使所有的复制按钮都会出现在页面中固定的位置）。不需使用时令其隐藏，需要时再令其显示。

2.embed的样式可以直接再CSS文件修改。

3.自动生成的DIV框又大，z-index又是99，会遮挡很多东西。我的处理方法是，直接进ZeroClipboard.js中修改代码，height width z-index等等均可修改。

4.该办法需要调用flash，在微信不可用