【javascript】复制到剪贴板功能(支持目前各种浏览器)
本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】复制到剪贴板功能(支持目前各种浏览器)的更多相关文章
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- js/jQuery实现复制到剪贴板功能,兼容所有浏览器
因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...
- js实现复制到剪贴板功能,兼容所有浏览器
http://www.cnblogs.com/PeunZhang/p/3324727.html https://github.com/zeroclipboard/ZeroClipboard 复制链接到 ...
- Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能
开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了. 本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 F ...
- JQuery实现复制到剪贴板功能
在网页中实现复制到剪贴板功能,有两种方法, 第1种方法:使用JavaScript自带的方法,但是这种方法只能在IE下使用. document.execCommand("Copy") ...
- JS pc端和移动端共同实现复制到剪贴板功能实现
JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...
- 【转】js插件zClip实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...
随机推荐
- delphi xe5 android iny绿色版+最新SDK/NDK安装方法
转自: http://bbs.2ccc.com/topic.asp?topicid=438595 首先感谢iny的绿色版,因为我的精简Win7 32位安装原版镜像4.63G过程正常,但是编译出错,后来 ...
- 对于shell脚本参数获取时的一点小技巧
问题如下: 根据脚本参数的个数$#进行一个循环,在依次输出每个参数$1 $2 $3...... 我有一个循环变量i $i 取到这时的i为1,我想使用这个1再去调用$1,也是就是打印出第一个参数 就是$ ...
- JavaScript 找出数组中重复的元素
实现检测数组重复元素的功能,需要注意一点的是,多个(2个或2个以上)重复元素,我们只需要挑出一个来就可以了. <!DOCTYPE html> <html> <head&g ...
- 华为机试题——数组排序,且奇数存在奇数位置,偶数存在偶数位置
题目要求很简单,就是给你一个数组,对它进行排序,并且排序后,奇数要放在奇数的位置上,偶数要放在偶数的位置上,如果不满足这个规则的话就在数组上填充0 实现代码如下,文中值得注意的一点就是如何判读这个数字 ...
- Hadoop集群(第5期)_Hadoop安装配置
1.1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台.以Hadoop分布式文件系统(HDFS,Hadoop Distributed Filesystem)和Map ...
- flash 类和对象的关系
每个具体的对象后面都隐藏着抽象的类. flash 中as3.0中所有的类,都是为了创建对象所用的.反过来,所创建的任何具体对象都隐藏着抽象的类. 类可以把它看做函数,类的属性是函数的数据,类的方法是函 ...
- [jobdu]二进制中1的个数
做法是n&(n-1).据说还有变态的查表法:http://www.cnblogs.com/graphics/archive/2010/06/21/1752421.html.最后,居然必须用sc ...
- Introducing RecyclerView(一)
RecyclerView 是Android L版本中新添加的一个用来取代ListView的SDK,它的灵活性与可替代性比listview更好.接下来通过一系列的文章讲解如何使用RecyclerView ...
- EqualsBuilder和HashCodeBuilder
package com.osc.demo; import java.util.List; import org.apache.commons.lang.builder.EqualsBuilder; i ...
- 推荐GitHub上10 个开源深度学习框架
推荐GitHub上10 个开源深度学习框架 日前,Google 开源了 TensorFlow(GitHub),此举在深度学习领域影响巨大,因为 Google 在人工智能领域的研发成绩斐然,有着雄厚 ...