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

 更新时间:2014年08月30日 13:31:24   投稿:mdxy-dxy  
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板

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

先下载ZeroClipboard https://www.jb51.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.jb51.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 );

相关文章

  • 一行代码告别document.getElementById

    一行代码告别document.getElementById

    很久以前做网页的时候,几乎没有听说过 getElementById 这一玩意儿。在那个ie独占天下的年代里,做的页面也几乎都是ie only的。只要ie没问题,那就OK了
    2012-06-06
  • JS设置下拉列表框当前所选值的方法

    JS设置下拉列表框当前所选值的方法

    这篇文章主要介绍了JS设置下拉列表框当前所选值的方法,涉及JavaScript结合jsp动态设置select下拉列表框的相关技巧,需要的朋友可以参考下
    2015-12-12
  • postMessage消息通信Promise化的方法实现

    postMessage消息通信Promise化的方法实现

    postMessage Api 想必大家都不陌生,WebWorker 通信会用到,iframe 窗口之间通信也会用到,那么我们能不能将 postMessage 进行一次转化,把他变成类似 Promise 的使用方式,所以本文给大家介绍了postMessage消息通信Promise化的方法实现,需要的朋友可以参考下
    2024-03-03
  • JavaScript禁止复制与粘贴的实现代码

    JavaScript禁止复制与粘贴的实现代码

    下面小编就为大家带来一篇JavaScript禁止复制与粘贴的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05
  • JavaScript函数中的防抖与节流原生实现及第三方库的使用

    JavaScript函数中的防抖与节流原生实现及第三方库的使用

    当你频繁的触发用户界面时,会不停的触发事件处理函数,可能导致界面卡顿,浏览器奔溃,页面空白等情况,而解决这一问题的,正是函数节流与函数防抖,所以本文将给大家介绍一下JavaScript函数中的防抖与节流原生实现及第三方库的使用,需要的朋友可以参考下
    2023-10-10
  • 微信小程序实现页面跳转传值以及获取值的方法分析

    微信小程序实现页面跳转传值以及获取值的方法分析

    这篇文章主要介绍了微信小程序实现页面跳转传值以及获取值的方法,结合实例形式总结分析了微信小程序页面跳转及传值的常用操作技巧,需要的朋友可以参考下
    2017-12-12
  • js实现购物车功能

    js实现购物车功能

    这篇文章主要为大家详细介绍了js实现购物车功能的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • 微信小程序中使用自定义图标(阿里icon)的方法

    微信小程序中使用自定义图标(阿里icon)的方法

    这篇文章主要介绍了微信小程序中使用自定义图标(阿里icon)的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • javascript 获取模态窗口的滚动位置代码

    javascript 获取模态窗口的滚动位置代码

    模态窗口的滚动位置获取办法还有不知道的吗?下面的方法或许对大家有所帮助,感兴趣的朋友可以了解下,希望对大家有所帮助
    2013-08-08
  • javascript &&和||运算法的另类使用技巧

    javascript &&和||运算法的另类使用技巧

    一直以为 && 和 || 这两个伟大的运算法只能在判断表达式使用,也就是常在if语句使用,原来错了,它还可以运用在简化选择性执行语句的操作,有点拗口,简单点也就是:操作执行某条语句,不执行某条语句。
    2009-11-11

最新评论