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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
Javascript与flash交互通信基础教程
Aug 07 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
vue组件编写之todolist组件实例详解
Jan 22 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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
制作美丽的拉花
2021/03/03 冲泡冲煮
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jQuery实现数字加减效果汇总
2014/12/16 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python怎么调用自己的函数
2020/07/01 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
高中军训广播稿
2014/01/14 职场文书
元旦晚会邀请函
2014/01/27 职场文书
国际金融专业自荐信
2014/07/05 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
刑事申诉状范文
2015/05/20 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
Python中异常处理用法
2021/11/27 Python