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 值就不会报错了。
来源: http://www.jb51.net/article/116599.htm