开发者社区> 芝麻软件> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery插件:跨浏览器复制jQuery-zclip

简介: 一、jQuery-zclip jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。 jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player。
+关注继续查看

一、jQuery-zclip

jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。

jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player。

1、jQuery-zclip插件官网
ZeroClipboard.swf下载地址

开源地址:https://github.com/patricklodder/jquery-zclip

2、jQuery-zclip用法

//引入jQuery-zclip相关js及swf文件
<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> <script type="text/javascript" src="<%=path%>/resources/js/jquery.zclip.min.js"></script> <script type="text/javascript"> $(function(){ $("#cp-btn").zclip({ path:'<%=path%>/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中 copy:function(){ return $('#inviteUrl').val(); } }); }); </script> <div class="form-row"> <div class="col-md-5"> <input class="form-control" value="" id="inviteUrl"/> </div> <div class="col-md-1"> <a href="javascript:void(0)" id="cp-btn" class="btn btn-default btn-block btn-clean">复&nbsp;&nbsp;制</a> </div> </div>

 

配置说明
path:swf的路径(复制主要是用flash解决不同浏览器的复制)
copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容
beforeCopy:复制之前要做的function;
afterCopy:复制之后要做的function;

提供了3个方法
show:$(selected).zclip('show');//复制功能有效
hide:$(selected).zclip('hide');//复制功能无效
remove:$(selected).zclip('remove');//完全移除复制功能

3、演示效果
运行成功后,点击复制按钮,会弹出一个提示框,表示复制到剪切板生效了,如下:

弹出框出现“Copied text to clipboard”英文字符,有点不符国人使用习惯,把它改为“成功复制到剪切板”,在jquery.zclip.min.js文件中找到“Copied text to clipboard”替换成“成功复制到剪切板”就可以了,效果如下:

使用afterCopy事件,将不会出现弹出框,可以自定义弹出框

 

二、jquery.zeroclipboard

插件地址:http://plugins.jquery.com/zeroclipboard/

Zero Clipboard的官方地址:http://zeroclipboard.org/

开源地址:https://github.com/zeroclipboard/jquery.zeroclipboard

跨浏览器复制神器 ZeroClipboard 2.x快速入门详解

http://www.365mini.com/page/zeroclipboard-2_x-quick-start.htm

提醒:没有实践过

三、IE下的复制

window.clipboardDate.setData("Text", "复制文本"); 
alert("复制成功");

基本上没有直接这样使用,记录下方法

它需要ActiveXObject的支持

         function allowActiveXObject() {
                if (!!window.ActiveXObject || "ActiveXObject" in window)
                    return true;
                else
                    return false;
            }

四、弹出手动复制

function copyToClipboard(txt) {
            if (window.clipboardData) {
                window.clipboardData.clearData();
                window.clipboardData.setData("Text", txt);
                alert("复制成功!");
            } else if (navigator.userAgent.indexOf("Opera") != -1) {
                window.location = txt;
                alert("复制成功!");
            } else if (window.netscape) {
                try {
                    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
                } catch (e) {
                    alert(
                        "被浏览器拒绝!\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'");
                }
                var clip = Components.classes['@@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces
                    .nsIClipboard);
                if (!clip)
                    return;
                var trans = Components.classes['@@mozilla.org/widget/transferable;1'].createInstance(Components
                    .interfaces.nsITransferable);
                if (!trans)
                    return;
                trans.addDataFlavor('text/unicode');
                var str = new Object();
                var str = Components.classes["@@mozilla.org/supports-string;1"].createInstance(Components.interfaces
                    .nsISupportsString);
                var copytext = txt;
                str.data = copytext;
                trans.setTransferData("text/unicode", str, copytext.length * 2);
                var clipid = Components.interfaces.nsIClipboard;
                if (!clip)
                    return false;
                clip.setData(trans, null, clipid.kGlobalClipboard);
                alert("复制成功!");
            } else {
                window.prompt("复制到剪贴板: 按 CTRL+C", txt);
            }
        }

 

 

oncopy 事件

http://www.runoob.com/jsref/event-oncopy.html

参考文章:实现JS复制、粘贴,Chrome/Firefox下可用

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
layer官方演示与讲解(jQuery弹出层插件)
1. 使用layer遇到困难?Fly社区虔诚为您解惑 2. layer 2.0 发布,以独立形式呈现的最后一个版本 3. Fork layer on Github,爱她,就给她加个星啵 当前版本:2.0(2015-09-01更新) ://github.com/sentsin/layer 大小:40KB,下载次数:124689 一些唠叨 在线调试 快速上手 前往旧版1.8.5 layer是一款近年来口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
1340 0
10 个非常酷的基于jQuery的菜单效果插件
除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1.  右击菜单 一个创建右击菜单的插件,简洁且易用。  源码/演示 2.  jQuery多级菜单——FX CSS菜单与子菜单 使用CSS创建菜单,使用JavaScript展示效果。
682 0
8 个高可用的 jQuery 表单验证插件
1) A Jquery Inline Form Validation   2) Jquery Contact Form validation   3) Form Validation Using Jquery   4) Using Jquery and Aj...
515 0
jquery插件整理篇(三)图片展示插件
(1)imgAreaSelect imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。imgAreaSelect   (2)Easy Slide EasySlide 是以jQuery为基础开发的一个图库展示插件,EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示,并加上鼠标指向时的暂停效果(Pause),可以当作图库展示或是动画及广告Banner使用。
1577 0
jquery插件整理篇(一)导航类jq插件,菜单jq插件
(1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件。 (2)jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion。
1436 0
SlidesJS - 老牌的响应式 jQuery 幻灯片插件
  SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件。支持循环、自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作出优雅的幻灯片效果。
645 0
Select-or-Die:灵活的 jQuery 下拉列表插件
  Select-or-Die 是一个 jQuery 插件,用来自定义下拉列表(Select)元素。原生的下拉选择元素在各个浏览器的默认样式差异很多,而且自定义样式很困难,因此 Web 开发人员喜欢使用插件来模拟下拉选择功能。
610 0
40款非常有用的 jQuery 插件推荐(系列一)
  jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
1004 0
+关注
芝麻软件
编程语言,框架相关专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
JavaScript异步编程
立即下载
23-Vue.js在前端...1506518547.pdf
立即下载