ZeroClipboard 完美实现复制粘贴功能、跨浏览器兼容

来源：互联网发布：chm 软件编辑：程序博客网时间：2024/05/16 04:58

注：在本地通过文件浏览方式是不能复制成功的，要放到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 down14         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 }