复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)

  相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能。但是由于各大浏览器的实现方案不一样,导致几乎没有统一的实现这样功能的方案。而被各大程序猿喜欢的jQuery也没有类似的方法或者函数来实现这一功能。包括博客园这样的技术博客区对代码的复制,也没有直接复制到剪贴板,需要用户自己去手动ctrl+c。如下:

  对于一般技术类的用户来说这没什么,但是对于那些非技术类的人来说,反而会觉得比较麻烦。因此从实用性和提高用户体验的角度出发,得给用户直接复制粘贴到剪切板的功能。今天介绍一个实现此功能的小插件,ZeroClipboard,同时兼讨论解决它在IE下不能使用的问题(我用的IE10)。

  1、下载jQuery,可自行百度谷歌。

  2、下载ZeroClipboard,Zero Clipboard的官方地址:http://zeroclipboard.org/,github地址:https://github.com/zeroclipboard/ZeroClipboard

  3、添加js库。

<script src="jQuery.js" type="text/javascript"></script>
<script src="ZeroClipboard.js" type="text/javascript"></script>
<script src="clip.js" type="text/javascript"></script><!-- 你测试或者使用的js -->

  4、html代码。

<a title="点击复制当前链接" href="javascript:void(0);" data-clipboard-text="粘贴内容" id="copy"></a>
<!-- 其中id用于js选择器使用,data-clipboard-text用于保存你要粘贴的内容-->

  5、JS代码

var client = new ZeroClipboard(document.getElementById("copy"));
client.on("ready", function(readyEvent) {
    client.on("aftercopy", function(event) {
       alert("复制成功,地址为: " + event.data["text/plain"]);
    });
});    

  好了,酱紫功能就完成了。效果如下:

  

当然了,我这里只是粘贴了我写死的内容,你完全可以根据你的需求来复制内容到剪贴板用户输入的内容或者其它内容。这你可以根据官方的API可以找到对应的使用方法。

  在各大浏览器包括谷歌浏览器、火狐以及一些国产的浏览器里测试都没问题。但是每次讨论到IE,问题就来了,当在IE浏览器(我用的IE10)打开的时候却出现了问题,点击没有效果。而谷歌里搜索也发现其他人也有类似的问题,不明觉厉。然后查看了IE实现复制到剪贴板的实现方法,并重新优化了下上面的JS代码,兼容了IE。修改过后的JS代码如下:

if(window.clipboardData){
               //for IE
        var copyBtn = document.getElementById("copy");
        copyBtn.onclick = function(){
            var text = $("#copy").attr("data-clipboard-text");
            window.clipboardData.setData(‘text‘,text);
            alert("复制成功,地址为: " + text);
        }
    }else{
        var client = new ZeroClipboard(document.getElementById("copy"));
        client.on("ready", function(readyEvent) {
            client.on("aftercopy", function(event) {
                alert("复制成功,地址为: " + event.data["text/plain"]);
            });
        });
    }            

  OK,搞定!现在在IE里也能正常使用了。效果如下:

  不过在IE中出于安全考虑,IE会提示用户是否允许访问剪贴板。

  以上所有代码仅写出了关键核心的部分,如有问题,欢迎交流吐槽!

时间: 2024-08-29 15:24:17

复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)的相关文章

支付宝红包口令自动复制到剪贴板脚本js,安卓,IOS通用版

有客户找到涛舅舅,要求开发一个可以自动支付宝红包口令的js脚本,经过大量探索和优化,目前此脚本功能已经测试成功! 预期效果: 只要来访用户在当前网页的任意位置点击一下,支付宝红包口令即可复制到用户手机的剪贴板上,只要他打开支付宝,就会触发领红包提示! 只要你有自己的网站,并且有流量,完全不需要人工干预,实现躺赚!效果非常显著! 赏金脚本使用方法: 在你的任意页面源码上(比如index.php),任意位置插入script标签即可,如下举例: 赏金脚本有以下特点: 1.安卓苹果通用,一段js代码,兼

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

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

jQuery ZeroClipboard 复制到剪贴板功能,兼容所有浏览器

<!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/jav

黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

JS实现复制到剪贴板

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>复制到剪贴板</title> <script src="http://img3

js插件zClip实现复制到剪贴板功能

之前在一个项目中用过插件,但是最近又要做,发现,出现问题了,根据以往记忆做好,检查了所有问题,还是不出现,元素是绑定了zclip_type这个事件,就是弹出不显示,想了下,查看html结构元素一看,问题发现,覆盖的层定位有问题.相对body定位了,没有相对td定位. 一,准备工作. 准备好jquery,然后去http://www.steamdev.com/zclip/这里下载jquery.zclip.js和ZeroClipboard.swf ,不过那里的ZeroClipboard.swf下载地址

ZeroClipboard 复制到剪贴板

使用 ZeroClipboard 可以简单的将内容复制到剪贴板,通过 Adobe Flash 和 JavaScript 来实现.“Zero” 意义为这个类库没有界面,界面需要由你来建立. 版本: ZeroClipboard v2.1.6 github地址 在线实例 实例预览 ZeroClipboard 复制到剪贴板 简单示例 使用方法 载入 JavaScript 文件 <script src="ZeroClipboard.js"></script> 复制 如果

【转】js实现复制到剪贴板功能,兼容所有浏览器

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

js点击后将文字复制到剪贴板,将图片复制到剪贴板

复制文字: [html] view plaincopy <table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"> <tr> <th width="100%" style="color: white;"><s:text name