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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php权重计算方法代码分享
2014/01/09 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
博士学位自我鉴定范文
2013/12/26 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
施工安全生产承诺书
2014/05/23 职场文书
养成教育经验材料
2014/05/26 职场文书
新员工入职欢迎词
2015/01/23 职场文书
2015年双拥工作总结
2015/04/08 职场文书
Python 正则模块详情
2021/11/02 Python
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang