开发中经常会用到复制的功能，在 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. Amlogic开关机按键功能实现

    在做AMlogic项目的时候,配置按键后,发现电源键仅仅能关机,不能开机,非常是郁闷 后来发现是漏掉了一个地方没有配置,firmware/arc_power/irremote2arc.c 这个文件中面 ...

  2. Activity的绘制流程简单分析（基于android 4.0源码进行分析）

    要明白这个流程,我们还得从第一部开始,大家都知道 在activity里面 setcontentview 调用结束以后 就可以看到程序加载好我们的布局文件了,从而让我们在手机上看到这个画面. 那么我们来 ...

  3. PHP - 使用pear的HTTP_Upload包进行上传

    前台代码: <html> <head> <title>上传文件</title> </head> <body> <form ...

  4. SIX GOD

    SIX GOD是什么意思呢.?_百度知道 SIX GOD

  5. 【BOI2007】【BZOJ1176】Mokia

    1176: [Balkan2007]Mokia Time Limit: 30 Sec Memory Limit: 162 MB Submit: 1059 Solved: 432 [Submit][St ...

  6. QString与char*的相互转换

    原地址:http://blog.sina.com.cn/s/blog_5c70dfc80100r0nh.html 一.QString转char*   QString str; int num=0; s ...

  7. ANTLR4权威參考手冊（一）

    写在前面的话: 此文档是对伟大的Terence Parr的著作<the definitive antlr4 reference>的翻译本.致敬!欢迎转载,请注明原地址,请尊重劳动成果.翻译 ...

  8. ASP.NET - 跳转页面

    1. Response.Redirect("../Manager/AddBookInfoImages.aspx?id=" + Server.UrlEncode(ReturnValu ...

  9. python发送post和get请求

    python发送post和get请求 get请求: 使用get方式时,请求数据直接放在url中. 方法一. import urllib import urllib2 url = "http: ...

  10. 一些关于Console的API函数

    SetConsoleCtrlHandlerGenerateConsoleCtrlEventSetConsoleMode ReadConsole WriteConsole SetConsoleCP Se ...