<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>
Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能
5星 · 超过95%的资源 需积分: 9 125 浏览量
2013-09-06
19:02:04
上传
评论
收藏 10KB ZIP 举报 
ZeroClipboard.zip （9个子文件） 
ZeroClipboard 
.project 1KB .mymetadata 312B src WebRoot WEB-INF classes lib web.xml 382B
index.html 4KB images 
grid.gif 60B ZeroClipboard ZeroClipboard.js 10KB
ZeroClipboard.swf 1KB META-INF MANIFEST.MF 36B .myeclipse .classpath 362B
- 1
- 2
前往页