ZeroClipboard.js使用一个flash复制多个文本框

ZeroClipboard.js是一个支持复制和粘贴的JavaScript插件,目前官方已经到2.x的版本了,但不支持IE9以下的浏览器,而如果要兼容,则可以使用1.x的版本,我使用的是最开始的一个版本:1.0.7的。该版本支持IE7和IE8,今天主要介绍如何使用一个flash支持多个复制文本。

一般我们需要复制一个地方的时候,大多都使用下面这个代码新建一个对象:

<div id="J_pop_share">
	<input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
	<button id="J_copy_btn1">复制</button>
</div>

单个:

var clip = null;//ZeroClipboard.Client对象  
var current_id = null;//当前所在的文本元素id  
//指定ZeroClipboard.swf位置
ZeroClipboard.setMoviePath(location.protocol+"//club.pcauto.com.cn/js/ZeroClipboard.swf");  
clip = new ZeroClipboard.Client();//创建ZeroClipboard.Client对象  
clip.setHandCursor(true);//鼠标移动到元素上之后显示手型  
clip.glue('J_copy_btn1','J_pop_share');
clip.setText($('#J_video_iframe1').val());
//添加复制成功之后的操作  
clip.addEventListener('complete', function() {  
	alert('复制成功');  
});

如果有多个的话,是不是需要新建四个flash对象呢?可能没尝试过的人会这么做,这篇文章分享另外一种做法,就是在上面这个flash的基础上,当移动到另外一个按钮时,改变flash的位置和复制的文本。

多个文本的HTML代码:

<div id="J_pop_share">
	<div>
		<input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
		<button id="J_copy_btn1" class="btn-copy-text">复制</button>
	</div>
	<div>
		<input id="J_video_iframe2" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
		<button id="J_copy_btn2" class="btn-copy-text">复制</button>
	</div>
	<div>
		<input id="J_video_iframe3" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
		<button id="J_copy_btn3" class="btn-copy-text">复制</button>
	</div>
	<div>
		<input id="J_video_iframe4" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
		<button id="J_copy_btn4" class="btn-copy-text">复制</button>
	</div>
</div>

javascript代码:在上面js的基础上,加上下面这个代码

//上面的代码
$(".btn-copy-text").each(function(i){
	var index =i+1;
	$(this).on('mouseover',function(){
		var button_id = $(this).attr('id');//复制div的id  
		//var text_id = button_id+'_text';//要复制的元素id  
		var text_id = 'J_video_iframe'+(index);
		move_swf(text_id , button_id);  
	});  
});  

//移动浮动flash div到指定的地方,从而只需要使用一个flash即可在多个地方实现复制功能  
function move_swf(text_id,button_id) {  
	//重新指定flash浮动div位置,用reposition  
	clip.reposition(button_id, 'J_pop_share');
	clip.setText($('#'+text_id).val());  
}

你可以在官方文档中下载flash和查看更多例子:https://github.com/kujian/zeroclipboard/tree/v1.0.7

在使用ZeroClipboard.js时,可能会出现复制不起作用或者其它诡异的bug,例如我今天在IE中,由于内容是放在弹窗里面,复制第一个是可以的,但第二个则会报错,提示“没有这个对象”,调试了好久,始终无法解决,后来不隐藏弹窗,却不会报错,所以,我觉得应该是flash隐藏和显示有关,把弹窗隐藏改用绝对定位加left:-9999px,显示的时候,再定位正确的left值就不会报错了。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流