开发中经常会用到复制的功能，在 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. C#Windows的HelloWorld

    在MSDN中找到Form类:MSDN-->.NET开发-->.NET Framework SDK 2.0-->Class Library Reference -->System ...

  2. servlet 与缓存(4)

    1.设置缓存的两种情况: 第一种:对于不常常变化的数据,在servlet中能够为其设置合理的缓存时间值,以避免浏览器频繁向server发送请求,提升server的性能. 另外一种:假设要实现一种高级功 ...

  3. 透过表象看本质！？之三——Kalman滤波

    数据拟合能够估计出数据变化的趋势,另外一个同等重要的应用是如何利用这一趋势,预测下一时刻数据可能的值.通俗点儿说,你观察苍蝇(蚊子,蜜蜂)飞了几秒,你也许会想“它下一个时刻可能在哪儿”,“呈现出什么样 ...

  4. Linux主机上发布java web应用

    1.链接远程主机命令 ssh user@hostname 如: shh root@192.168.1.1 2.查看主机操作系统版本 uname -a 3.linux系统安装mysql a)检查是否安装 ...

  5. perl uri_escape(urlencode ) 转换

    [root@wx03 lib]# cat a1.pl #引入模块 use URI::Escape; #urlencode $encoded = uri_escape("[中均]") ...

  6. JENKINS 打包发布脚本

    #!/bin/bash #nohup bash check_new_pkgs_dev.sh & #steps below: ##发布的机器上运行这个脚本 #定时遍历发布包存放路径 #1.遍历所 ...

  7. URL vs. HTML 录制模式

    转自:http://blog.csdn.net/testing_is_believing/article/details/5274188 一般来说,如果是标准使用IE访问的B/S架构,应该使用HTML ...

  8. POJ 2762推断单个联通(支撑点甚至通缩+拓扑排序）

    Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 14789 ...

  9. Swift - 做一个简单的无线U盘（手机端Http服务器搭建）

    由于iOS系统的封闭性,在数据传输方面十分不方便.不像安卓设备,直接连接电脑就能当U盘使用.所以一般我们如果用iPhone临时存取个东西,要么使用数据线连接iTunes,要么手机电脑都登上QQ,使用Q ...

  10. 进阶：案例六: Context Menu(静态 与 动态)

    实现: 1.add: 2.delete 3.add2 实现步骤: 1.新建属性display_text 2.创建layout 3.代码部分: add事件: METHOD onactionadd . D ...