注：在本地通过文件浏览方式是不能复制成功的，要放到web服务器目录下，通过http网址访问才能复制


ZeroClipboard是通过flash+js实现复制到剪切板功能，浏览器兼容性好。工作原理大概是：在“复制”按钮上遮罩一个透明的flash，flash被点击后，会调用其的剪切板处理功能，完成对文本内容的复制。
下载 ZeroClipboard文件，需要把ZeroClipboard.js 和 ZeroClipboard.swf 放入到项目中。
实现步骤：创建一个flash->让其漂浮在“复制”按钮上->监听flash的点击事件->点击后将文本内容存到剪切板。
创建flash：
    ZeroClipboard.setMoviePath("js/zeroclipboard/ZeroClipboard.swf");//注意把地址改成自己项目中的实际地址

    var clip = new ZeroClipboard.Client();
让flash漂浮在“复制”按钮之上：
　　clip.glue('d_clip_button'); //'d_clip_button'为按钮id
clip.reposition()可以用来处理当页面大小发生变化时，flash可能会错位而导致点击不到，它可以重新复位 Flash到复制按钮之上，可以将它绑定到window的resize事件上。
如果复制按钮的上层有position:relative的块级元素，如div，并且复制按钮和这个块级元素的位置是相对固定的，则可以在调用glue函数时，将这个块级元素的id作为glue的第二个参数，此时reposition就失效了。这也是ZeroClipboard的示例中的实现方式：clip.glue('d_clip_button', 'd_clip_container');
　　clip.setHandCursor( true ); // 设置鼠标移到复制按钮上为手型

　　clip.setText("复制内容"); // 设置要复制的文本内容

　　clip.setCSSEffects( true );//解决flash遮挡导致按钮像 css “:hover”, “:active” 等伪类可能会失效的问题。
ZeroClipboard事件：
　　load flash加载完成事件

　　mouseOver 鼠标划入事件

　　mouseOut 鼠标划出事件

　　mouseDown 鼠标按下事件

　　mouseUp 鼠标松开事件

　　complete 复制成功事件
 废话不说了，直接上实现代码：
View Code


 1$(function () {
 2    init('d_clip_button', 'd_clip_container', 'testContent');//'testContent'复制内容id
 3 });
 4 
 5 function init(btnid, containerid,textid) {
 6     var clip = null;
 7     ZeroClipboard.setMoviePath("js/zeroclipboard/ZeroClipboard.swf");
 8     clip = new ZeroClipboard.Client();
 9     clip.setHandCursor(true);
10     clip.setCSSEffects(true);
11            
12     clip.addEventListener('mouseDown', function (client) {
13     // update the text on mouse down
14         clip.setText($('#' + textid).val());
15     });
16 
17     clip.addEventListener('complete', function (client, text) {
18      //debugstr("Copied text to clipboard: " + text);                
19         alert("复制成功!");                
20     });
21             
22     clip.glue(btnid, containerid);
23 }





相关文件下载：ZeroClipboard.zip


原文地址：http://www.cnblogs.com/tobebetter/archive/2013/01/09/ZeroClipboard.html

    
http://files.cnblogs.com/files/godlovexq/模仿苹果虚拟home键的效果有解释的.zip
 

转载于:https://www.cnblogs.com/godlovexq/p/5252782.html

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>

js:

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

js：

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



说明：要在服务器环境下才可以运行

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>
js:
<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>
js：
<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>


附件下载