使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
ZeroClipboard的实现原理
ZeroClipboard利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是Flash，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板
ZeroClipboard的安装方法
首先需要下载ZeroClipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js和ZeroClipboard.swf放入到你的项目中。
然后把在你要使用复制功能的页面中引入ZeroClipboard的js文件：ZeroClipboard.js
如下代码：
<scripttype="text/javascript"src="ZeroClipboard.js"></script>
注意：以上ZeroClipboard.js,ZeroClipboard.swf需要放在同一路径下。如果不在同一路径，可使用ZeroClipboard.setMoviePath(“Flash路径”);来设置ZeroClipboard.swf地址
ZeroClipboard实现简单跨浏览器复制
varclip=newZeroClipboard.Client();//新建一个对象
clip.setHandCursor(true);//设置鼠标为手型
clip.setText("哈哈");//设置要复制的文本。
//注册一个button，参数为id。点击这个button就会复制。
//这个button不一定要求是一个input按钮，也可以是其他DOM元素。
clip.glue("copy-botton");//和上一句位置不可调换
这样，这样基本功能实现了，点击按钮就可以复制设置好的文本了。你可能注意到了，待复制的文本是固定的，如果想要动态改变的怎么办，比如复制一个输入框中的内容。不用担心，下面会讲到的。
ZeroClipboard的高级功能
1、reposition()方法
因为按钮上漂浮有一个Flash按钮，所以当页面大小发生变化时，Flash按钮可能会错位，这样就点不着了。不要紧，ZeroClipboard提供了一个reposition()方法，可以重新计算Flash按钮的位置。我们可以将它绑定到resize事件上。如下面代码是在jQuery下实现的resize事件重新设置按钮位置：
$(window).resize(function(){
clip.reposition();
});
2、hide()和show()方法
这两个方法可以隐藏和显示Flash按钮。其中show()方法会调用reposition()方法。
3、setCSSEffects()方法
当鼠标移到按钮上或点击时，由于有Flash按钮的遮挡，所以像css“:hover”,“:active”等伪类可能会失效。setCSSEffects()方法就是解决这个问题。首先我们需要将伪类改成类，比如：
#copy-botton:hover{border-color:#FF6633;}//可以改成下面的":hover"改成".hover"
#copy-botton.hover{border-color:#FF6633;}
我们可以调用clip.setCSSEffects(true);这样ZeroClipboard会自动为我们处理：将类.hover当成伪类:hover。
4、getHTML()方法
如果你想自己实例一个Flash，不用ZeroClipboard的附着方法，那么这个方法就可以帮上忙了。它接受两个参数，分别为Flash的宽度和高度。返回的是Flash对应的HTML代码。例如：
varhtml=clip.getHTML(150,20);
你可以用innerHTML或直接document.write();进行输出。
以下是测试输出的组装完毕的HTML代码：
<embedid="ZeroClipboardMovie_1"src="zeroclipboard/ZeroClipboard.swf"loop="false"menu="false"quality="best"bgcolor="#ffffff"width="150"height="20"name="ZeroClipboardMovie_1"align="middle"allowScriptAccess="always"allowFullScreen="false"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer"flashvars="id=1&width=150&height=20"wmode="transparent"/>
IE的FlashJavaScript通信接口上有一个bug。你必须插入一个object标签到一个已存在的DOM元素中。并且在写入innerHTML之前请确保该元素已经appendChild方法插入到DOM中。
ZeroClipboard事件处理
ZeroClipboard提供了一些事件，你可以自定义函数处理这些事件。ZeroClipboard事件处理函数为addEventListener();例如当Flash完全载入后会触发一个事件“load”。
clip.addEventListener("load",function(client){
alert("Flash加载完毕！");
});
ZeroClipboard会将clip对象作为参数传入。即上例中的“client”。
还有“load”也可以写成“onLoad”，其他的事件也可以这样。
其他事件还包括：
mouseOver鼠标移上事件
mouseOut鼠标移出事件
mouseDown鼠标按下事件
mouseUp鼠标松开事件
complete复制成功事件
其中mouseOver事件和complete事件比较常用。
前面说过，如果需要动态改变待复制的内容，那mouseOver事件就可以派上用场了。例如需要动态复制一个id为test的输入框中的值，我们可以在鼠标over的时候重新设置值。
clip.addEventListener("mouseOver",function(client){
vartest=document.getElementById("test");
client.setText(test.value);//重新设置要复制的值
});
//复制成功：
clip.addEventListener("complete",function(){
alert("复制成功！");
});