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下可用

 

相关文章
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
59 2
|
2月前
|
数据可视化 Java Windows
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
本文介绍了如何在Windows环境下安装Elasticsearch(ES)、Elasticsearch Head可视化插件和Kibana,以及如何配置ES的跨域问题,确保Kibana能够连接到ES集群,并提供了安装过程中可能遇到的问题及其解决方案。
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
61 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
40 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
38 4
jQuery Cookie 插件
|
8天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
21 0
|
2月前
|
安全 Oracle Java
edge浏览器加载java插件
edge浏览器加载java插件
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
93 1
|
3月前
|
Web App开发 JavaScript 前端开发
如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用
这篇文章介绍了如何在浏览器中安装和使用Vue开发者工具,提供了两种下载方式,包括直接下载编译好的插件和从GitHub上下载源代码后进行打包。文章还详细说明了在Chrome浏览器中加载插件的步骤,以及插件在Vue项目和非Vue项目中的不同表现。
如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用
|
3月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
295 8