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>
效果图:
源码下载:http://download.csdn.net/detail/for_china2012/6225323
Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能的更多相关文章
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- HTML 5 video 标签跨浏览器兼容
<video width="320" height="240" controls> <source src="movie.mp4 ...
- 原生js解决跨浏览器兼容问题
//跨浏览器兼容问题 Util = { //添加类名 add : function(ele,type,hand){ if(ele.addEventListener){ ele.addEventList ...
- 转载于山边小溪的博客--编写跨浏览器兼容的 CSS 代码的金科玉律
http://www.cnblogs.com/lhb25/archive/2010/06/19/1760786.html 原始网页 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很 ...
- JQuery实现复制到剪贴板功能
在网页中实现复制到剪贴板功能,有两种方法, 第1种方法:使用JavaScript自带的方法,但是这种方法只能在IE下使用. document.execCommand("Copy") ...
- JS pc端和移动端共同实现复制到剪贴板功能实现
JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...
- 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...
随机推荐
- Amlogic开关机按键功能实现
在做AMlogic项目的时候,配置按键后,发现电源键仅仅能关机,不能开机,非常是郁闷 后来发现是漏掉了一个地方没有配置,firmware/arc_power/irremote2arc.c 这个文件中面 ...
- Activity的绘制流程简单分析(基于android 4.0源码进行分析)
要明白这个流程,我们还得从第一部开始,大家都知道 在activity里面 setcontentview 调用结束以后 就可以看到程序加载好我们的布局文件了,从而让我们在手机上看到这个画面. 那么我们来 ...
- PHP - 使用pear的HTTP_Upload包进行上传
前台代码: <html> <head> <title>上传文件</title> </head> <body> <form ...
- SIX GOD
SIX GOD是什么意思呢.?_百度知道 SIX GOD
- 【BOI2007】【BZOJ1176】Mokia
1176: [Balkan2007]Mokia Time Limit: 30 Sec Memory Limit: 162 MB Submit: 1059 Solved: 432 [Submit][St ...
- QString与char*的相互转换
原地址:http://blog.sina.com.cn/s/blog_5c70dfc80100r0nh.html 一.QString转char* QString str; int num=0; s ...
- ANTLR4权威參考手冊(一)
写在前面的话: 此文档是对伟大的Terence Parr的著作<the definitive antlr4 reference>的翻译本.致敬!欢迎转载,请注明原地址,请尊重劳动成果.翻译 ...
- ASP.NET - 跳转页面
1. Response.Redirect("../Manager/AddBookInfoImages.aspx?id=" + Server.UrlEncode(ReturnValu ...
- python发送post和get请求
python发送post和get请求 get请求: 使用get方式时,请求数据直接放在url中. 方法一. import urllib import urllib2 url = "http: ...
- 一些关于Console的API函数
SetConsoleCtrlHandlerGenerateConsoleCtrlEventSetConsoleMode ReadConsole WriteConsole SetConsoleCP Se ...