开发中经常会用到复制的功能，在 IE 下实现比较简单，但要想做到跨浏览器比较困难了。

本文将介绍一个跨浏览器的库类 Zero Clipboard ，它利用 Flash 进行复制，所以只要浏览器装有 Flash 就可以运行，而且比 IE 的 document.execCommand("Copy") 更加灵活。

Zero Clipboard 的实现原理

Zero Clipboard 利用 Flash 进行复制，之前有 Clipboard Copy 解决方案，其利用的是一个隐藏的 Flash，但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板，所以 Zero Clipboard 对此进行了改进，用了一个透明的 Flash ，让其漂浮在按钮之上，这样其实点击的不是按钮而是 Flash ，也就可以使用 Flash 的复制功能了。

<html>

<head>

	<title>Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css">

		body {

			background: url("images/grid.gif") repeat;

		}

		.clip_container {

			width: 500px;

			height: 198px;

			position: absolute;

			top: 50%;

			left: 50%;

			margin:-210px 0 0 -250px;

			border: 2px solid #FF8000;

			background: #FFFFFF;

		}

		.clip_title {

			height: 35px;

			font-family: arial,sans-serif;

			font-size: 21px;

			color: #FFFFFF;

			line-height: 35px;

			background: #FF9B08;

		}

		.clip_button {

			width: 50px;

			height: 18px;

			padding: 3px;

			margin: 5px 0px 5px 5px;

			font-size: 14px;

			font-weight: bold;

			cursor: default;

			text-align: center;

			line-height: 18px;

			color: #FFFFFF;

			border: 1px solid #CCCCCC;

			float: left;

		}

		.clip_note {

			width: 432px;

			height: 24px;

			margin: 5px 0px;

			font-family: '微软雅黑';

			font-size: 12px;

			line-height: 24px;

		}

		.clip_text {

			margin: 0px 5px;

		}

		.clip_button {

			background-color: #008000;

			border: 1px solid #96CA76;

		}

		.clip_button.hover {

			background-color: #96CA76;

			border: 1px solid #008000;

		}

		.clip_button.active {

			background-color: #008000;

			border: 1px solid #96CA76;

		}

		.footer {

			width: 485px;

			height: 18px;

			margin-top: 6px;

			margin-left: 5px;

			font-family: Microsoft YaHei, SimSun, FangSong;

			font-size: 12px;

			color: #515151;

			text-align: center;

			line-height: 18px;

		}

		.footer a {

			color: #515151;

			font-weight: bold;

		}

		.footer a:hover {

			color: #0080FF;

		}

	</style>

	<script type="text/javascript" src="ZeroClipboard/ZeroClipboard.js"></script>

	<script type="text/javascript">

		// 创建ZeroClipboard（剪贴板）对象

		var clip = new ZeroClipboard.Client();

		clip.setHandCursor(true);// 设置鼠标为手型

		// 初始化方法

		function init() {

			// 鼠标悬停时将内容复制到剪贴板

			clip.addEventListener("mouseOver", function (client) {

				clip.setText();

			});

			// 鼠标悬停时将内容复制到剪贴板

			clip.addEventListener("mouseDown", function (client) {

				var clipText = $("clip_text").value;

				if (clipText == "") {

					$("clip_msg").innerHTML = "<font color=\"#FF0000\">请输入要复制的内容!</font>";

					$("clip_text").focus();

				}

			});

			// 内容复制到剪贴板成功时提示信息

			clip.addEventListener("complete", function (client, text) {

				if (text != "") {

					$("clip_msg").innerHTML = "<font color=\"#008000\">内容已成功复制到剪贴板!</font>";

				} else {

					$("clip_msg").innerHTML = "<font color=\"#FF0000\">请输入要复制的内容!</font>";

					$("clip_text").focus();

				}

			});

			// 绑定 Copy 按钮

			clip.glue("clip_button");

		}

		// 封装通过ID获取元素的方法

		function $(id) {

			return document.getElementById(id);

		}

	</script>

</head>

<body onLoad="init()">

	<div class="clip_container">

		<div id="clip_title" class="clip_title">Click Copy Button First, Then Ctrl+V To Paste!</div>

		<div id="clip_button" class="clip_button">Copy</div>

		<div id="clip_note" class="clip_note">（点击 Copy 即可复制内容至剪贴板） <span id="clip_msg"></span></div>

		<div class="clip_text"><textarea cols="58" rows="5" id="clip_text" onChange="clip.setText(this.value)"></textarea></div>

		<div class="footer">

			<p>Design By MrChu <a target="_blank" href="http://sighttp.qq.com/authd?IDKEY=453cbf8f7771ac25821cd442998509166f3be5cc012809d8" alt="联系作者" title="联系作者"><img border="0" src="http://wpa.qq.com/imgd?IDKEY=453cbf8f7771ac25821cd442998509166f3be5cc012809d8&pic=45" alt="点击这里给我发消息" title="点击这里给我发消息" style="vertical-align:middle;"> 联系作者</a> <a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=muLz_-X4_-X58u-t--P48-v12uvrtPn19w" alt="点击这里给我发送邮件" title="点击这里给我发送邮件" style="text-decoration:none;"><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_01.png" style="border:none;vertical-align:middle;"/></a></p>

		</div>

	</div>

</body>

</html>

效果图：

源码下载：http://download.csdn.net/detail/for_china2012/6225323

Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能的更多相关文章

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

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

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

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

  3. 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）

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

  4. HTML 5 video 标签跨浏览器兼容

    <video width="320" height="240" controls>   <source src="movie.mp4 ...

  5. 原生js解决跨浏览器兼容问题

    //跨浏览器兼容问题 Util = { //添加类名 add : function(ele,type,hand){ if(ele.addEventListener){ ele.addEventList ...

  6. 转载于山边小溪的博客--编写跨浏览器兼容的 CSS 代码的金科玉律

    http://www.cnblogs.com/lhb25/archive/2010/06/19/1760786.html   原始网页 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很 ...

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

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

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

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

  9. 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

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

随机推荐

  1. (step 8.2.8)hdu 1079(Calendar Game)

    题目大意是: 两个家伙在区域赛前夕闲的无聊,然后玩一种无限纠结的游戏,随即给定一个日期,每次只能移动day OR month.......... 而且如果下一个月没有当前day的话, 你就不能移动mo ...

  2. JVM类加载过程学习总结

    JVM类加载过程学习总结 先不说JVM类加载的原理,先看实例: NormalTest类,包含了一个静态代码块,执行的任务就是打印一句话. /** * 在正常类加载条件下,看静态代码块是否会执行 * @ ...

  3. 双绞线的制作，T568A线序，T568B线序

    双绞线的制作 1.1 实验目的 双绞线是组建局域网时常常使用的通信传输介质,通过本实验,让学生学会制作双绞线. 1.2 实验任务 (1)了解双绞线的特性及屏蔽与非屏蔽双绞线的区别. (2)了解EIA/ ...

  4. hdu1503

    #include<iostream> #include<cstdio> #include<cstdlib> #include<cstring> #inc ...

  5. Winform - 判断GroupBox控件中的TextBox文本框是不是为空

    foreach (Control item in this.groupBox2.Controls) { if (item is TextBox) { if (item.Text.Trim() == & ...

  6. Redis + Jedis + Spring整合遇到的异常（转）

    项目中需要用到缓存,经过比较后,选择了redis,客户端使用jedis连接,也使用到了spring提供的spring-data-redis.配置正确后启动tomcat,发现如下异常: Caused b ...

  7. Inhouse interview(websense)

    1.Tell me about yourself? My name is xxx,i 'm from xxx. now , I am a postgratuation and my major sub ...

  8. HDU 1030 Delta-wave 数学题解

    给出一个数字塔,然后求沿着数字之间的边走,给出两个数字,问其路径最短的长度是多少. 看似一条搜索题目,只是有一定做题经验的人都知道,这个不是搜索题,直接搜索肯定超时. 这个是依据规律计算的数学题目. ...

  9. 解决Java compiler level does not match the version of the installed Java project facet.问题

    其实之前遇到过Java compiler level does not match the version of the installed Java project facet.这个问题,因为当时没 ...

  10. iOS 使用UIBezierPath类实现随手画画板

    在上一篇文章中我介绍了 UIBezierPath类 介绍 ,下面这篇文章介绍一下如何通过这个类实现一个简单的随手画画板的简单程序demo,功能包括:划线(可以调整线条粗细,颜色),撤销笔画,回撤笔画, ...