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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
Python中的默认参数详解
2015/06/24 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
pycharm导入源码的具体步骤
2020/08/04 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
百丽国际旗下购物网站:优购
2017/02/28 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
幼儿园中秋节活动反思
2014/02/16 职场文书
工程质量承诺书范文
2014/03/27 职场文书
公司委托书怎么写
2014/08/02 职场文书
捐款感谢信
2015/01/20 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
网吧管理制度范本
2015/08/05 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书