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

前端之家收集整理的这篇文章主要介绍了ZeroClipboard.js使用一个flash复制多个文本框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

" />

单个:

显示手型 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){ 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());
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/38508.html

猜你在找的JavaScript相关文章