ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)

前端技术 2023/09/02 JavaScript

但是值得注意的是官方介绍中已明确表态说这个插件不支持ie6,下面将提供多实例化Zero Clipboard复制功能的实现及兼容ie6的写法！

先下载ZeroClipboard http://www.phpstudy.net/jiaoben/24961.html

<style type=\"text/css\">
 body { font-family:arial,sans-serif; font-size:9pt; }
 .copyit {text-align:center; border:1px solid #FD6001; background-color:#ED730B; margin:10px; padding:2px 5px; 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:1px solid #ccc;padding:5px;}
</style>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"/js/ZeroClipboard/ZeroClipboard.js\"></script>
<div class=\"clip_container\">
<textarea id=\"fe_text\" cols=50 rows=5 class=\"copycnt\">第1个被复制的内容！！！</textarea>
<b class=\"copyit\">复制内容</b>
</div>
<br/>
<div class=\"clip_container\">
<textarea id=\"fe_text\" cols=50 rows=5 class=\"copycnt\">第2个被复制的内容！！！</textarea>
<b class=\"copyit\">复制内容</b>
</div>
<script type=\"text/javascript\">
var clip = null;
function copyThis() {
	if($.browser.version==6.0){
		//针对ie6
		$(\'.copyit\').bind(\"click\",function(){
		var code=$(this).parents(\".clip_container\").find(\".copycnt\").text();
		window.clipboardData.setData(\"Text\",code);
		alert(\'被复制的内容:\\n\'+code);
	  })
	  return;
	}
	ZeroClipboard.setMoviePath(\"http://img.phpstudy.net/js/scripts/clipboard.swf\'\");//如果ZeroClipboard.js, ZeroClipboard.swf放在同一目录下，可省略这句;
	clip = new ZeroClipboard.Client();
	$(\'.copyit\').mouseover( function() {
	 var code=$(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>
<textarea style=\"width:300px;height:300px;\">
粘贴复制的内容到这里试试！！
</textarea>

上面的实现方法，除了ie6使用window.clipboardData.setData来实现复制功能外，其它浏览器都用Zero Clipboard 插件来实现复制功能！

使用该插件时应注意的几点：

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 ，不用Zero Clipboard的附着方法，那么这个方法就可以帮上忙了。它接受两个参数，分别为Flash的宽度和高度。返回的是Flash对应的 HTML 代码。例如：
var html = clip.getHTML( 150, 20 );

本文地址：https://www.stayed.cn/item/4828

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案