本demo支持各种浏览器复制,亲测可用(IE8,IE9,IE10,火狐,谷歌)。

本demo中使用了ZeroClipboard(下载地址:https://github.com/zeroclipboard/zeroclipboard)。

本demo 必须在服务器环境下,浏览器直接打开无效。

本demo 需要引入3个文件:jquery.min.js、ZeroClipboard.min.js和ZeroClipboard.swf。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复制到剪切板demo</title>
<script type="text/javascript" src="/webtest/js/jquery.min.js"></script>
<script type="text/javascript" src="/webtest/js/ZeroClipboard.min.js"></script>
</head>
<body>
<input type="button" value="复制当前页面url" class="my_copy" >
</body>
<script type="text/javascript"> $(function() {
var url = window.location.href; try{//支持ZeroClipboard
ZeroClipboard.config( { swfPath: "/webtest/js/ZeroClipboard.swf" } );
$(".my_copy").each(function(i) {
var client = new ZeroClipboard($(this));
client.on("copy", function (event) {
var clipboard = event.clipboardData;
clipboard.setData( "text/plain", url);
alert('当前页面链接已复制到剪贴板!');
// clipboard.setData( "text/html", "<b>Copy me!</b>" );
// clipboard.setData( "application/rtf", "{\\rtf1\\ansi\n{\\b Copy me!}}" );
});
});
}catch(e){
//不支持ZeroClipboard
$(".my_copy").each(function(i) {
$(this).on("click", function(){
var res = window.clipboardData.setData("Text", encodeURI(url));
if(res){
alert('收集链接已复制到剪贴板!');
} }); });
} })
</script>
</html>

【javascript】复制到剪贴板功能(支持目前各种浏览器)的更多相关文章

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

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

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

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

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

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

  4. js/jQuery实现复制到剪贴板功能,兼容所有浏览器

    因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...

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

    http://www.cnblogs.com/PeunZhang/p/3324727.html https://github.com/zeroclipboard/ZeroClipboard 复制链接到 ...

  6. Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能

    开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了. 本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 F ...

  7. JQuery实现复制到剪贴板功能

    在网页中实现复制到剪贴板功能,有两种方法, 第1种方法:使用JavaScript自带的方法,但是这种方法只能在IE下使用. document.execCommand("Copy") ...

  8. JS pc端和移动端共同实现复制到剪贴板功能实现

    JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...

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

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

随机推荐

  1. Ubuntu 14.04远程登录服务器--ssh的安装和配置

    ssh是一种安全协议,主要用于给远程登录会话数据进行加密,保证数据传输的安全,现在介绍一下如何在Ubuntu 14.04上安装和配置ssh 1.更新源列表 打开"终端窗口",输入& ...

  2. UVA 515 King

    差分约束系统的第一个题目,看了落花大神的博客后,对差分约束有了一定了解,关键在于建图,然后就是判断是否存在负权回路. 关于差分约束系统的解释详见维基百科:http://zh.wikipedia.org ...

  3. comm命令——

    comm命令 :对已经有序的文件进行比较——第一列只在文件1中出现的文件,第二列只在文件2中出现的文件,第三列在文件1和文件2中同事出现的文件 请注意前提条件:             comm对文件 ...

  4. Visual Studio原生开发的10个调试技巧(转)

    本文由 伯乐在线 - JingerJoe 翻译自 Marius Bancila.转载请参见文章末尾处的要求.   [感谢@_La_Isla_Bonita 的热心翻译.如果其他朋友也有不错的原创或译文, ...

  5. 【HDOJ】3652 B-number

    终于自己写出来一道数位DP啊.继续训练DP. /* 3652 */ #include <iostream> #include <sstream> #include <st ...

  6. Hibernate一级缓存、二级缓存

    缓存就是把以前从数据库中查询出来和使用过的对象保存在内存中,准确说就是一个数据结构中,这个数据结构通常是或类似HashMap,当以后要使用某个对象时,先查询缓存中是否有这个对象,如果有则使用缓存中的对 ...

  7. bzoj1046

    首先这肯定是一道LIS的变形,这次求的是方案,还要求字典序最小 (注意这个字典序最小是指下标最小而不是数最小) 首先预处理以每个数为首,能组成多长的上升序列(这里我们用单调队列解决) 然后按照位置顺序 ...

  8. Google Chrome中的高性能网络 (三)

    使用预连接优化了TCP连接管理 已经预解析到了主机名,也有了由OmniBox和Chrome Predictor提供信号,预示着用户未来的操作.为什么再进一步连接到目标主机,在用户真正发起请求前完成TC ...

  9. 处理.NET中的内存泄露

    Fabrice Marguerie是一位软件架构师和咨询师,他在MSDN发表了如何检测和避免.NET程序内存与资源泄漏的文章.此文章描述了编写.NET程序时可能发生的内存与资源泄漏,以及如何避免这些泄 ...

  10. NOIP2011普及组 瑞士环 保序性

    题目链接:http://noi.openjudge.cn/ch0401/4363/ 分析:如果直接模拟,时间复杂度是O(r*nlogn)超时 然后我们发现每次一轮开始时,刚开始是保序的,然后我们可以把 ...