总结ZeroClipboard实现复制粘贴功能

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的示例代码中监听的是mouseOver事件，但是我在测试中发现有的时候复制没有成功，所以我改成了mouseDown事件后就好，这个不知道是神马问题？？？

还有就是在complete事件中用alert提示复制成功的话，那么给按钮设置样式会出问题，提示后在IE和FF下按钮呈现的是hover的样式，需要鼠标划入划出一次后恢复。经测试在IE下可以通过jquery ui的dialog等代替alert解决，但是FF下解决不了，通过js移除hover样式也不行。如果不提示复制成功则不会出现这种问题，这个也不知道是神马问题？？？

以上2个问题期待大神解答，望大神不吝赐教，Thks。 

转载于:https://www.cnblogs.com/tobebetter/archive/2013/01/09/ZeroClipboard.html