复制到剪贴板的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会提示用户是否允许访问剪贴板。

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

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

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

    有客户找到涛舅舅,要求开发一个可以自动支付宝红包口令的js脚本,经过大量探索和优化,目前此脚本功能已经测试成功! 预期效果: 只要来访用户在当前网页的任意位置点击一下,支付宝红包口令即可复制到用户手机 ...

  2. html5: 复制到剪贴板 clipboard.js

    1.使用clipboard.min.js工具,引用此js 注意事项: IOS微信网页开发中,若使用此工具来开发复制功能,则需要在超链接/按钮上新增 onclick=" " 2.cl ...

  3. Js 之复制到剪贴板 clipboard.js

    一.下载 https://github.com/zenorocha/clipboard.js/archive/master.zip 二.Demo示例 <!DOCTYPE html> < ...

  4. 标签的增加、删除与复制,动态标签js不生效的解决

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

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

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  7. 【转】js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

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

    Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...

  9. ZeroClipboard 复制到剪贴板

    使用 ZeroClipboard 可以简单的将内容复制到剪贴板,通过 Adobe Flash 和 JavaScript 来实现.“Zero” 意义为这个类库没有界面,界面需要由你来建立. 版本: Ze ...

随机推荐

  1. mac 文本编辑器 文本编码Unicode utf-8 不适用的问题

    在mac上使用默认的文本编辑器打开下载的xx.txt文件,如果文本是gbk的编码可能会出现 文本编码Unicode utf-8 不适用的打开错误,如下图 解决方式: 文本编辑---偏好设置-----打 ...

  2. 关于tomcat会在url末尾自动追加斜杠(/)

    今天,突然发现一个问题, 比如我的请求路径为  http://ip:port/my_project/myapp, 在浏览器中敲入这个地址,然后会显示 http://ip:port/my_project ...

  3. Django1.9开发博客(7)- 实现功能

    到目前为止我们已经完成了一个django应用的所有基础部分. 包括url配置.视图.模型和模板.接下来开始继续完善我们的博客系统了. 首先我们需要一个显示每篇文章的详细页面,对不? 文章详情 对于首页 ...

  4. centos 装VBOX

    #cd /etc/yum.repos.d/wget http://download.virtualbox.org/virtualbox/rpm/rhel/virtualbox.repoyum inst ...

  5. table表格中实现tbody部分可滚动,且thead部分固定

    1.想要实现表格的thead部分固定切tbody部分可滚动,就需要将thead与tbody进行分离,具体做法是 1.设置thead,tbody都为display:block: 2.设置th与td的宽度 ...

  6. C#窗体布局方式

    DataGridView:显示数据表后台数据绑定: List<xxx> list = new List<xxx>(); dataGridView1.DataSource = l ...

  7. HTML 文本格式化<b><big><em><i><small><strong><sub><sup><ins><del>

    <b> 标签-粗体 定义和用法: <b>标签规定粗体文本. 提示和注释 注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选 ...

  8. Dispatcher.Invoke方法

    前一篇小猪分享过在WPF中简单的使用BackgroundWorker完成多线程操作!在那篇中小猪利用了BackgroundWorker组件对耗时比较多的操作放在了单独的BackgroundWorker ...

  9. OC面向对象—继承

    OC面向对象—继承 一.基本概念 程序的世界和人类的“对象”世界在思想上是没有设么区别的,富二代继承了父母,自然就拥有了父母拥有的所有资源,子类继承了父类同样就拥有了父类所有的方法和属性(成员变量). ...

  10. MySQL 入门知识点

    参考网址:http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html 1.数值类数据列类型 数据列类型 存储空间 描述 TINYINT ...