开发中经常会用到复制的功能，在 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. Oracle查看表空间使用情况

     查看表空间使用情况 select upper(f.tablespace_name) "表空间名",        d.tot_grootte_mb "表空间大小(m ...

  2. jQuery 查询 xml

    加载xml:(注:这个方法在Chrome是用不了的,Chrome是禁止访问本地的xml文件,在ie11里面用不了,ie11的xmlDom文档没有load方法) function loadXML(fil ...

  3. ASP漏洞+SQL注入的入侵方法

    本文就是想对装上了防火墙的主机,进行入侵攻击的大概思路小结一下. 首先当然是用扫描器对这台服务器(以下简称主机A)进行常规的扫描,得到初步的信息.再用nmap -sS IP -P0 -p 139 ,透 ...

  4. 基于visual Studio2013解决面试题之1204大数组查找

     题目

  5. Qt4----子例化QDialog（可扩展对话框的使用）

    1.linux下安装Qt4请参考如下博文: Qt4在linux下的安装 2.Qt4工程的创建请参考如下博文: Qt4创建工程的几种方法:linux系统 3.可扩展对话框 通过纯代码的形式,建立工程.点 ...

  6. C# / MSSQL / WinForm / ASP.NET - SQLHelper中返回SqlDataReader数据

    /// <summary> /// Execute a SqlCommand that returns a resultset against the database specified ...

  7. django admin manytomany获取所选字段值

    和一般views中前端数据的获取一样. def save_model(self, request, obj, form, change):         door_id_list= request. ...

  8. HTML5 input placeholder 颜色 改动

    David Murdoch:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS input[placeholder], [placeholder], ...

  9. MySQL filesort优化案例一则

    今天遇到一个filesort优化的案例,感觉不错,分享出来. MySQL中filesort是什么意思?官方手册定义: MySQL must do an extra pass to find out h ...

  10. 【MongoDB】在windows平台下搭建mongodb的分片集群(二)

    在上一片博客中我们讲了Mongodb数据库中分片集群的主要原理. 在本篇博客中我们主要讲描写叙述分片集群的搭建过程.配置分片集群主要有两个步骤.第一启动全部须要的mongod和mongos进程. 第二 ...