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

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

 

时间: 2024-09-17 01:01:39

jQuery插件:跨浏览器复制jQuery-zclip的相关文章

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题_网页编辑器

Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中. 然后把在你要使用复制功能的页面中引入Zero Cl

js实现IE跨浏览器复制内容到剪贴板

Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板. Zero Clipboard的安装方法 其实也不算安装啦,就是使用前的准备工作. 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和ZeroClipboard.swf 放入到你的项目中 下载地址:

jquery插件推荐浏览器嗅探userAgent_jquery

综合概述 jQuery在1.7.x版本中,去掉了对浏览器嗅探支持,建议使用特性检测,然而在实际项目中,或多或少也需要这个功能. 兼容性 IE6+.Chrome.Firefox.Safari.Opera 框架依赖 原生JS支持 模块支持 支持AMD.node和浏览器 使用介绍 1.识别引擎.举例如下: //如果浏览器是webkit核心,执行以下代码 if(!!client.engine.webkit){     //todo } 2.识别浏览器.举例如下:   //如果是IE浏览器,且IE的版本是

jquery 插件-网上下载的jQuery特效代码怎么用?

问题描述 网上下载的jQuery特效代码怎么用? 网上下载的jQuery特效代码怎么用? 解决方案 jquery特效代码 解决方案二: 最好找到使用文档,不然很麻烦

2014年50个程序员最适用的免费JQuery插件_jquery

有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎可以解决一个网站所有的问题它可以从做一个有吸引力和创意的网站解决所有那些阻碍你的问题如果你想解决任何跨浏览器的问题,那就必须收藏使用JavaScript函数库 jQuery库是Web开发人员的重要来源.你会发现很多互联网的jQuery插件都是免费使用的,但发现这些优秀的jQuery插件,需要你花费许

分享平时整理收集的11款jQuery插件,很好很强大

☆ ☆ ☆ ☆ ☆ jQuery表单验证插件 jQuery表单验证插件是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性,使用量也是最多的一种表单验证方法.经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评. jQuery-File-Upload插件 jQuery- File-Upload插件支持多文件上传,拖拽文件上传,进度条,预览图片.视频和音频. 支持跨域上传,分块上传和可恢复的文件上传和客户端图像调整.可以在支持标准HTM

jQuery插件集合:帮助你打造不同的网页特效

文章简介:年终总结]2012年开发人员应该尝试的16款新鲜的jQuery插件. jQuery的是一个多浏览器的Javascript集合,以轻松地简化了客户端脚本的HTML.jQuery的格式设计帮助你获得一个文件,选择DOM元素,动画,处理事件,并开发Ajax程序设计人员能够根据需要创建一些高级别的jquery插件.使用这些插件方法可以创建高效强大的网页和Web程序. 保持学习最新的jQuery插件有时似乎是一个完整的工作.每隔一天,我们似乎可以发现一些新的东西,尖端的东西,有时我们发现的东西,

2012年开发人员的16款新鲜的jquery插件体验分享_jquery

jQuery的是一个多浏览器的Javascript集合,以轻松地简化了客户端脚本的HTML.jQuery的格式设计帮助你获得一个文件,选择DOM元素,动画,处理事件,并开发Ajax程序设计人员能够根据需要创建一些高级别的jquery插件.使用这些插件方法可以创建高效强大的网页和Web程序.  保持学习最新的jQuery插件有时似乎是一个完整的工作.每隔一天,我们似乎可以发现一些新的东西,尖端的东西,有时我们发现的东西,是真正的创新和必要的对于我们的工作来说.下面是从2012年开始的新的和令人兴奋

初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能_jquery

解决思路:1. 在标题处增加一个[-][+]号,供用户点击. 2. 用户收缩和展开屏幕的行为保存在Cookie里面.页面重新加载或者用户重新登录系统,仍然能记住用户的行为. 优点:1.使用Jquery插件的形式来做,容易扩展.容易实现. 2. 保存在Cookie的行为,容易实现,减少工作量,用户也能接收.如保存在数据库,则增加页面的负载. 缺点:不能每个页面使用单独行为,既是:每次用户的收缩和扩展在系统都是全局的.并且到其他计算机登录.或者清除缓存之后,就不能记住用户的操作了. 首先使用js函数