开发中经常会用到复制的功能，在 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. 在WINDOWS下 三步快速配置 eclipse c++ 环境

    所需软件 1.Eclipse IDE for C/C++ Developers http://www.eclipse.org/downloads/packages/eclipse-ide-cc-dev ...

  2. Win32 Windows编程 十二

    一.对话框 1.对话框的分类 2.对话框的基本使用方式 3.对话框资源 4.有模式对话框的使用 5. 无模式对话框的使用 5.1 加入对话框资源 5.2 定义窗体处理函数 BOOL CALLBACK ...

  3. 数学之路-python计算实战(14)-机器视觉-图像增强(直方图均衡化)

    我们来看一个灰度图像,让表示灰度出现的次数,这样图像中灰度为 的像素的出现概率是  是图像中全部的灰度数, 是图像中全部的像素数,  实际上是图像的直方图,归一化到 . 把  作为相应于  的累计概率 ...

  4. matlab三维画图

    matlab三维画图主要有三个命令:plot3命令.mesh命令和surf命令. plot3 plot3是三维画图的基本函数,绘制的是最为主要的3D曲线图,最主要的调用格式是: plot3(X,Y,Z ...

  5. MFC：重绘Button，定制CButton，自画CPngButton，求赐教（各种bug包括性能bug）谢谢谢谢

    [1.]CPngButton.h(资源是最后图片) #pragma once #include<atlimage.h> #define PNUM 19 #define PLAYTIME 1 ...

  6. http异步请求

    1.加载异步请求包文件 2.java代码 package com.example.asynchttp; import org.apache.http.Header; import com.loopj. ...

  7. B树的实现与源代码二（删除源代码）

    int BTreeMaximum( BNode *x ) { if ( x->leaf ) { return x->key[x->size - 1]; } else { return ...

  8. Oracle多表的简单查询

    Oracle多表的简单查询 .多表查询 多表查询是指基于两个和两个以上的表或是视图的查询. 问题:显示雇员名,雇员工资及所在部门的名字[笛卡尔集]? select t.ename,t.sal,t1.d ...

  9. tcp接收xml数据解析

    避免tcp接收xml数据时加上xml数据长度,根据xml数据特点来解析recv到的xml数据 int nPos1 = 0; int nPos2 = 0; int nTempPos = 0; int n ...

  10. sql: 查询,select

    快速查询数据库中拥有那些表项:(类似linux中的ls, ls |grep table_name*)select * from tab where tname like 'YOUR_QERYNAME% ...