好资源导航 » 文章资讯 » ZeroClipboard.js使用一个flash复制多个文本框

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

2024-02-19 10:46:03 48

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

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


"/>
复制

单个：

varclip=null;//ZeroClipboard.Client对象
varcurrent_id=null;//当前所在的文本元素id
//指定ZeroClipboard.swf位置
ZeroClipboard.setMoviePath(location.protocol+"//club.pcauto.com.cn/js/ZeroClipboard.swf");
clip=newZeroClipboard.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代码：



"/>
复制


"/>
复制


"/>
复制


"/>
复制

javascript代码：在上面js的基础上，加上下面这个代码

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐