注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

ZeroClipboard支持所有浏览器复制到剪贴板  

2012-05-28 11:14:12|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在说到ZeroClipboard之前,先说说为何会用到ZeroClipboard。有时候需要在触发某JavaScript事件的同时,将某段文本复制到剪贴板。比如直接通过点击某复制按钮,将textarea中的内容复制到剪贴板,就不用先全选内容,再Ctrl+C了。另外如果在复制的同时,要记录这段文本被复制使用的次数,一般的方法是可以使用js脚本代码,在执行复制之后,执行form submit,提交一次则该文本被使用的次数计数器加1。
      <script type="text/javascript"><!--mce:0--></script>
 <form id="form1" action="copy.php" method="post">
<input onclick="copyCode('copyid');" name="title" type="button" value="【点击复制】" />
<textarea id="copyid">&lt;?php echo $content; ?&gt;</textarea>
</form>

若不考虑浏览器的兼容性,只要支持IE浏览器,则可以使用IE浏览器支持的window.clipboardData对象(js dom对象)的setData方法,如window.clipboardData.setData (“Text”,txt); 不过该window对象实现复制到剪贴板并不支持Firefox浏览器,当然更不支持Google Chrome浏览器。针对兼容火狐Firefox浏览器的js代码,可以用类似下面的这段JavaScript脚本实现复制。上面的JavaScript针对使用最多的两大主流浏览器:IE(IE6,IE7,IE8)和Firefox都可以实现复制到剪贴板功能。但是这段js脚本代码对使用用户群体越来越高的Google Chrome浏览器仍无法兼容。

这时候ZeroClipboard就派上用场了。ZeroClipboard使用一段隐藏的Adobe Flash 视频和JavaScript接口,简单实现复制文本到剪贴板的功能。只要用户的浏览器安装了adobe flash,就可以使用,adobe flash的安装率很高,同时兼容最新的adobe flash player 10。剪贴板复制操作由falsh里的一个用户点击事件触发。最新发布的版本是Zero Clipboard 1.0.7,下载Zero Clipboard

Zero Clipboard下载完毕之后,在解压的文件夹中复制 ZeroClipboard.js 和 ZeroClipboard.swf 到网站目录中,若要启用支持adobe flash 10的Rich Html 属性,则还要将ZeroClipboard10.swf也复制过来。最好将它们放在和使用该js的html代码同一级的目录中,否则需要设置指明ZeroClipboard.swf 所在的目录路径。Zero Clipboard使用如下实例:

 

Zero Clipboard 使用实例的说明在上面已经注明,Zero Clipboard使用起来还是比较简单的,使用过程中注意次序,ZeroClipboard.js->HTML代码–>创建ZeroClipboard对象的JavaScript代码–>…–>clip.glue(),尤其是一个页面上需要创建多个ZeroClipboard复制到剪贴板对象时。

在IE7.0中,最后的这段JavaScript代码不宜放在表格table,td等标签中。在Firefox浏览器中,拉动滚动条至隐藏Zero Clipboard的复制框后,需双击才能复制成功。在Google Chrome浏览器中,当前的测试完全兼容。为了有利于保护安全性,Internet explorer会限制网页运行可以访问计算机的脚本和ActiveX控件,因此Zero Clipboard在本地磁盘上测试无法使用,必须在服务器上测试,如http://localhost…或上传到网上空间

demo:http://www.jscsshtml.com/demo/copy/

最后再给出原理
ZeroClipboard实现原理:利用透明的Flash让其漂浮在复制按钮之上,点击的不是按钮而是Flash,这样通过Flash的复制功能将文本复制到剪贴板。



 

  评论这张
 
阅读(111)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017