Zclip复制页面内容到剪贴板兼容各浏览器

时间:2021-01-08 19:26:29

Zclip:复制页面内容到剪贴板兼容各浏览器

WEB开发中,要让用户复制页面中的一段代码、URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,点击这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方,下面介绍一种使用Zclip实现的兼容主流浏览器的方式。

利用插件来写的话就比较简单,源码下载

<html>
<head>
<title>Index</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.zclip.js"></script>
<script type="text/javascript">
$(function () {
$('.copy').zclip({
path: 'ZeroClipboard.swf',
copy: function () {//复制内容
return $(this).prev().prev().val();
},
afterCopy: function () {//复制成功
var msg= $(this).next().show();
setTimeout(function () { msg.hide() }, );
}
}); });
</script> </head>
<body>
<div>
<textarea>请输入内容</textarea><br/>
<a href="#" class="copy">复制内容</a>
<span style="color:red; display:none;">复制成功</span>
</div> </body>
</html>

参数说明

path:swf调用路径,必填项,默认为:ZeroClipboard.swf

copy:复制的内容,必填项,任意字符串,也可以是回调函数返回的内容

beforeCopy:复制内容前回调函数,可选

afterCopy:复制内容后回调函数,可选

更多属性参考:http://steamdev.com/zclip/

Table中循环绑定复制链接

工作中碰到一个问题,在这里把问题和解决方案列出来,仅供参考,要求实现下面的形式:

Zclip复制页面内容到剪贴板兼容各浏览器

下面的写法有并不能直接实现效果:

<!DOCTYPE html>
<html>
<head>
<title>table</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.zclip.js"></script>
<script type="text/javascript">
$(function () {
$('.copy').zclip({
path: 'ZeroClipboard.swf',
copy: function () {//复制内容
return $(this).prev().prev().html();
},
afterCopy: function () {//复制成功
var msg= $(this).next().show();
setTimeout(function () { msg.hide() }, );
}
}); });
</script> </head>
<body> <table cellspacing="" cellpadding="" rules="all" border="" style="background-color: White; border-color: #CCCCCC; width: 70%; border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>链接</th>
</tr>
<tr>
<td></td>
<td>张三</td>
<td>
<span>http://www.baidu.com</span><br/>
<a href="#" class="copy">复制链接</a>
<span style="color:red; display:none;">复制成功</span>
</td>
</tr>
<tr>
<td></td>
<td>李四</td>
<td>
<span>http://www.taobao.com</span><br/>
<a href="#" class="copy">复制链接</a>
<span style="color:red; display:none;">复制成功</span>
</td>
</tr> </table> </body>
</html>

加入定位(position: relative;)之后就行了,我也没有搞明白是为什么,在此记录一下,如果有高手路过,请指点一下。源码下载

<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style type="text/css">
.pos{
position: relative;
}
</style>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.zclip.js"></script>
<script type="text/javascript">
$(function () {
$('.copy').zclip({
path: 'ZeroClipboard.swf',
copy: function () {//复制内容
return $(this).prev().prev().html();
},
afterCopy: function () {//复制成功
var msg= $(this).next().show();
setTimeout(function () { msg.hide() }, );
}
}); });
</script> </head>
<body> <table cellspacing="" cellpadding="" rules="all" border="" style="background-color: White; border-color: #CCCCCC; width: 70%; border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>链接</th>
</tr>
<tr>
<td></td>
<td>张三</td>
<td class="pos">
<span>http://www.baidu.com</span><br/>
<a href="#" class="copy">复制链接</a>
<span style="color:red; display:none;">复制成功</span>
</td>
</tr>
<tr>
<td></td>
<td>李四</td>
<td class="pos">
<span>http://www.taobao.com</span><br/>
<a href="#" class="copy">复制链接</a>
<span style="color:red; display:none;">复制成功</span>
</td>
</tr> </table> </body>
</html>

说明

1、代码下载后需要部署到服务器上运行才行,比如在本地用IIS建一个网站或者虚拟目录

2、参考文章: http://www.helloweba.com/view-blog-222.html

http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html