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

 更新时间:2017年06月19日 16:18:05   作者:hehekai  
这篇文章主要为大家详细介绍了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()); 
}

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

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

相关文章

  • javascript 实现自由落体的方块效果

    javascript 实现自由落体的方块效果

    这其实是一个很简单的实现,create一个新的div元素,然后append到文档的body上,经过一定时间的延迟,做自由落体运动,着地后fade消失。 不多说,直接上代码。
    2010-01-01
  • JavaScript对象原型链原理解析

    JavaScript对象原型链原理解析

    这篇文章主要介绍了JavaScript对象原型链原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • JS实现数字格式千分位相互转换方法

    JS实现数字格式千分位相互转换方法

    下面小编就为大家带来一篇JS实现数字格式千分位相互转换方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • package.json中homepage属性的作用详解

    package.json中homepage属性的作用详解

    这篇文章主要介绍了package.json中homepage属性的作用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 微信小程序实现文件预览

    微信小程序实现文件预览

    这篇文章主要为大家详细介绍了微信小程序实现文件预览,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 关于捕获用户何时点击window.onbeforeunload的取消事件

    关于捕获用户何时点击window.onbeforeunload的取消事件

    关于捕获用户何时点击window.onbeforeunload的取消事件的代码,需要的朋友可以参考下。
    2011-03-03
  • js 获取范围内的随机数实例代码

    js 获取范围内的随机数实例代码

    下面小编就为大家带来一篇js 获取范围内的随机数实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 阿里巴巴技术文章分享 Javascript继承机制的实现

    阿里巴巴技术文章分享 Javascript继承机制的实现

    这篇文章主要介绍了阿里巴巴技术文章,分享的是一篇关于Javascript实现继承机制的文章,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 小程序实现短信登录倒计时

    小程序实现短信登录倒计时

    这篇文章主要为大家详细介绍了小程序实现短信登录倒计时,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JavaScript HTML DOM元素 节点操作汇总

    JavaScript HTML DOM元素 节点操作汇总

    这篇文章主要介绍了JavaScript HTML DOM元素 节点操作汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论