ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
但是值得注意的是官方介绍中已明确表态说这个插件不支持ie6,下面将提供多实例化ZeroClipboard复制功能的实现及兼容ie6的写法！
先下载ZeroClipboardhttps://www.nhooo.com/jiaoben/24961.html
<styletype="text/css">
body{font-family:arial,sans-serif;font-size:9pt;}
.copyit{text-align:center;border:1pxsolid#FD6001;background-color:#ED730B;margin:10px;padding:2px5px;cursor:pointer;font-size:12px;border-radius:3px;}
.copyit.hover{background-color:#FD6001;}.copyit.active{background-color:#d25102;}/*鼠标hover效果,实为调用setCSSEffects()方法*/
.copy_info{width:260px;height:100px;border:1pxsolid#ccc;padding:5px;}
</style>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<scripttype="text/javascript"src="/js/ZeroClipboard/ZeroClipboard.js"></script>
<divclass="clip_container">
<textareaid="fe_text"cols=50rows=5class="copycnt">第1个被复制的内容！！！</textarea>
<bclass="copyit">复制内容</b>
</div>
<br/>
<divclass="clip_container">
<textareaid="fe_text"cols=50rows=5class="copycnt">第2个被复制的内容！！！</textarea>
<bclass="copyit">复制内容</b>
</div>
<scripttype="text/javascript">
varclip=null;
functioncopyThis(){
if($.browser.version==6.0){
//针对ie6
$('.copyit').bind("click",function(){
varcode=$(this).parents(".clip_container").find(".copycnt").text();
window.clipboardData.setData("Text",code);
alert('被复制的内容:\n'+code);
})
return;
}
ZeroClipboard.setMoviePath("http://img.jb51.net/js/scripts/clipboard.swf'");//如果ZeroClipboard.js,ZeroClipboard.swf放在同一目录下，可省略这句;
clip=newZeroClipboard.Client();
$('.copyit').mouseover(function(){
varcode=$(this).parents(".clip_container").find(".copycnt").text();
clip.setText(code);
if(clip.div){//已创建过包含flash的父层div,则鼠标hover时重新定位flash层的位置
//clip.receiveEvent('mouseout',null);
clip.reposition(this);
}else{
clip.glue(this)};
//clip.receiveEvent('mouseover',null);
});
clip.addEventListener('complete',function(client,text){
alert("被复制内容：\n"+text);
});
}
copyThis();
</script>
<textareastyle="width:300px;height:300px;">
粘贴复制的内容到这里试试！！
</textarea>
上面的实现方法，除了ie6使用window.clipboardData.setData来实现复制功能外，其它浏览器都用ZeroClipboard插件来实现复制功能！
使用该插件时应注意的几点：
1、以上ZeroClipboard.js,ZeroClipboard.swf需要放在同一路径下。如果不在同一路径，可使用ZeroClipboard.setMoviePath(“Flash路径”);来设置ZeroClipboard.swf地址。
2、setCSSEffects()方法的解析：当鼠标移到按钮上或点击时，由于有Flash按钮的遮挡，所以复制按钮本身体的css“:hover”,“:active”等伪类可能会失效。setCSSEffects()方法就是解决这个问题。首先我们需要将伪类改成类，比如：
.copyit:hover{
border-color:#FF6633;
}
//需要将":hover"改成下面的".hover"
.copyit.hover{
border-color:#FF6633;
}
3、getHTML()方法的解析：如果你想自己实例一个Flash，不用ZeroClipboard的附着方法，那么这个方法就可以帮上忙了。它接受两个参数，分别为Flash的宽度和高度。返回的是Flash对应的HTML代码。例如：
varhtml=clip.getHTML(150,20);