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

作者:hehekai 时间:2024-04-27 15:19:14 

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值就不会报错了。

标签:ZeroClipboard.js,flash,文本框
0
投稿

猜你喜欢

  • 解决Python3中二叉树前序遍历的迭代问题

    2022-04-11 09:05:24
  • pytorch 禁止/允许计算局部梯度的操作

    2021-01-17 01:55:35
  • Jenkins定时构建语法规则及时间设置

    2022-05-03 19:36:24
  • Access数据库用另一种方式管理密码

    2008-10-13 12:25:00
  • PyTorch训练LSTM时loss.backward()报错的解决方案

    2022-01-10 00:04:09
  • 用Python实现命令行闹钟脚本实例

    2023-01-19 12:57:09
  • 删除数组中重复项(uniq)

    2009-12-28 12:23:00
  • Python模块_PyLibTiff读取tif文件的实例

    2023-04-11 03:22:06
  • python中reload(module)的用法示例详解

    2021-01-31 10:49:11
  • oracle命令行删除与创建用户的代码

    2009-03-02 10:54:00
  • Python中几种导入模块的方式总结

    2021-09-20 08:17:14
  • 解决golang内存溢出的方法

    2024-05-21 10:20:12
  • ASP连接SQL2005数据库连接代码

    2011-03-25 10:44:00
  • python和php哪个更适合写爬虫

    2023-10-28 00:51:14
  • Python绘制交通流折线图详情

    2023-04-29 01:26:36
  • Python按行读取文件的简单实现方法

    2023-06-14 22:55:49
  • 用Python编写一个每天都在系统下新建一个文件夹的脚本

    2021-11-08 22:39:16
  • Python中time库的使用(日期时间)

    2022-11-12 09:04:23
  • ASP 三层架构 Convert类实现代码

    2011-03-16 11:01:00
  • 心理模型

    2009-05-17 13:45:00
  • asp之家 网络编程 m.aspxhome.com