ZeroClipboard.js是一个支持复制和粘贴的JavaScript插件,目前官方已经到2.x的版本了,但不支持IE9以下的浏览器,而如果要兼容,则可以使用1.x的版本,我使用的是最开始的一个版本:1.0.7的。该版本支持IE7和IE8,今天主要介绍如何使用一个flash支持多个复制文本。
一般我们需要复制一个地方的时候,大多都使用下面这个代码新建一个对象:
<p id="J_pop_share"> <input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn1">复制</button> </p>
单个:
如果有多个的话,是不是需要新建四个flash对象呢?可能没尝试过的人会这么做,这篇文章分享另外一种做法,就是在上面这个flash的基础上,当移动到另外一个按钮时,改变flash的位置和复制的文本。
多个文本的HTML代码:
<p id="J_pop_share"> <p> <input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn1" class="btn-copy-text">复制</button> </p> <p> <input id="J_video_iframe2" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn2" class="btn-copy-text">复制</button> </p> <p> <input id="J_video_iframe3" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn3" class="btn-copy-text">复制</button> </p> <p> <input id="J_video_iframe4" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn4" class="btn-copy-text">复制</button> </p> </p>
javascript代码:在上面js的基础上,加上下面这个代码
在使用ZeroClipboard.js时,可能会出现复制不起作用或者其它诡异的bug,例如我今天在IE中,由于内容是放在弹窗里面,复制第一个是可以的,但第二个则会报错,提示“没有这个对象”,调试了好久,始终无法解决,后来不隐藏弹窗,却不会报错,所以,我觉得应该是flash隐藏和显示有关,把弹窗隐藏改用绝对定位加left:-9999px,显示的时候,再定位正确的left值就不会报错了。
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com