兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能
 点击预览  点击下载

相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要。

网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的。去看了几个常用的网站,都是用的透明flash遮挡“复制到剪贴板”按钮,所以当你点击“复制到剪贴板”的时候,点击的其实是flash,然后把你需要复制的内容传入到了flash,然后在通过flash的复制功能把传入的内容复制到了剪贴板。

加载JQuery库和zclip插件

  1. <script type="text/javascript" src="http://www.daimajiayuan.com/templets/skins/js/jquery-1.8.1.min.js"></script> 
  2. <script src="http://www.daimajiayuan.com/member/templets/js/jquery.zclip.min.js"></script> 

下面是一个小demo,主要是复制文本框中的链接到剪贴板。

HTML

  1. <input type="text" value="www.baidu.com" id="link"> 
  2. <span id="copyBtn">复制链接</span> 

然后加入脚本

  1. <script> 
  2.         $('#copyBtn').zclip({ 
  3.             path: "ZeroClipboard.swf", 
  4.             copy: function(){ 
  5.                 return $('#link').val(); 
  6.         } 
  7.         }); 
  8. </script> 

然后就可以直接打开网页测试了。这只是一个简单的小应用。

转载请注明:代码家园 » 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

也许你会喜欢和关注与本文内容高度相关的文章:

Zclip点击复制内容到剪贴板兼容各浏览器

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)