【经验总结】复制内容到剪贴板完美解决方案-Zero Clipboard


点击查看DEMO


很多人在做“复制到剪贴板”功能的时候,几乎都会搜索JS兼容方案解决,但JS兼容方案也都会出现一个问题:
“不那么兼容”

比如在火狐中,会默认禁止用户对剪贴板的访问,js复制的时候直接弹出“您的firefox安全限制限制您进行剪贴板操作,请打开'about:config'将signed.applets.codebase_principal_support'设置为true'之后重试”。
话说用户会傻到去修改firfox的配置么?还不如直接CTRL+C来得直接。


ZeroClipboard 库提供了一种简单的方法,使用一个透明的swf和一个JavaScript接口将文本复制到剪贴板。“透明的”标志着该库是无形的,用户界面是完全由你决定。
该库完全兼容Flash Player 10,用户单击即可完成拷贝内容到剪贴板的操作。这都是通过漂浮在DOM元素之上的swf完成的。


使用方法:

最新版的ZeroClipboard库可以参考如下方法:

Zero Clipboard : [Github项目主页] [ZeroClipboard下载] [在线演示]
下载ZeroClipboard库
页面中引入文件

<script type="text/javascript" src="ZeroClipboard.js"></script>

HTML文件:(指定data-clipboard-target为我们需要复制内容的textarea的id)

<html>
  <body>
    <textarea id="fe_text">Copy me!</textarea><br/>
    <button id="copy-button" data-clipboard-target="fe_text" title="点击复制内容">点击复制内容</button>
    <script src="ZeroClipboard.js"></script>
  </body>
</html>


JS文件:(直接实例化id为copy-button的button即可,绑定complete事件,args.text即是所要复制的texarea的内容[前提是HTML文件中一定要指定data-clipboard-target,如果不指定,则可以在complete回调函数中用clip.setText("我要复制的内容");来设置内容,或者在HTML文件中指定data-clipboard-text="我要复制的内容" ;属性来设置内容])

var clip = new ZeroClipboard( document.getElementById("copy-button"), {
  moviePath: "/path/to/ZeroClipboard.swf" //swf文件地址,如果和html同目录则不用设置
} );

clip.on( 'load', function(client) {
  // alert( "swf文件加载完成" );
} );

clip.on( 'complete', function(client, args) {
  this.style.display = 'none'; // "this" is the element that was clicked
  alert("内容复制到了剪贴板: " + args.text );
} );

具体可参考Github上的指引,或看demo中的用法。


老版的ZeroClipboard库可以参考链接:
Zero Clipboard : [项目主页] [ZeroClipboard下载] [在线演示]
Zero Clipboard跨浏览器复制内容到剪贴板
相比之下最新版的自然比老版的功能要优化一些。



阅读本文后,您的心情是:
 
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注
知识共享许可协议
评论(4) 浏览(28040) 引用(0)
引用地址:http://blog.baiwand.com/tb.php?sc=830cac&id=208
Tags:
« 【读书笔记】之Javascript prototype(JS原型)深入理解 【经验】zTouch-移动端触屏开发利器(zepto touch扩展) »

评论列表

  1. 三小无猜 2015-04-20 09:08
    这个插件如何使用上滑动跟下滑动啊?好像你没封装是吗?怎么用
     
    • 天之骄子 2015-05-07 14:51
      @三小无猜:对,这个只是核心功能函数。具体的操作可以在核心函数的回调操作中自己按需求编写。
       
  2. 两小无猜 2014-09-04 10:41
    写的简单清晰,代码运行起来很好,赞你
     
    • lihua 2015-03-25 15:53
      @两小无猜:为什么我弄不好??
       

Blogger

  • blogger
  • 天之骄子
  • 职位:研发工程师
    铭言:
    阳光与欢乐同在,
    与我同在
    主页:
    blog.baiwand.com

分类目录

日志归档

主题标签

数据统计

  • 日志:151篇
  • 评论:45条
  • 碎语:264条
  • 引用:0条

链接表

随机日志 »

最新日志 »

最新评论 »

标签云 »

订阅Rss
sitemap