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


Posted in Javascript onJune 19, 2017

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 相关文章推荐
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
AngularJS的ng-click传参的方法
Jun 19 #Javascript
JavaScript队列函数和异步执行详解
Jun 19 #Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 #Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 #Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 #Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 #Javascript
jQuery 实现双击编辑表格功能
Jun 19 #jQuery
You might like
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
PHP+DBM的同学录程序(3)
2006/10/09 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python 加密与解密小结
2018/12/06 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
JDO的含义
2012/11/17 面试题
人事专员的岗位职责
2014/03/01 职场文书
大学生评语大全
2014/04/18 职场文书
人事任命书格式
2014/06/05 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
公司表扬信格式
2015/05/04 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书