Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能
开发中经常会用到复制的功能，在 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>
效果图：
