您的位置：首页 > 其它

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

2015-07-20 20:37 501 查看

WEB开发中，要让用户复制页面中的一段代码、URL地址等信息，为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错，我们可以直接在页面中放置一个复制按钮，只需要轻轻一点这个复制按钮，内容将会被复制，然后用户可以粘贴到想粘贴的地方。

效果如下所示:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>演示：复制页面内容到剪贴板兼容各浏览器</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:760px; margin:40px auto 0 auto; min-height:150px;}
textarea{width:100%; height:80px; border:1px solid #ddd; color:#666}
#para{line-height:24px; background:#f7f7f7; padding:10px}
.copy{line-height:32px}
#msg{margin-left:10px; color:green; border:1px solid #3c3; background:url(checkmark.png) no-repeat 2px 3px; padding:3px 6px 3px 20px}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
<script type="text/javascript">
$(function(){
$('#copy_input').zclip({
path: 'js/ZeroClipboard.swf',
copy: function(){
return $('#mytext').val();
},
afterCopy: function(){
$("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功').fadeOut(2000);
}
});
$("#copy_p").zclip({
path: 'js/ZeroClipboard.swf',
copy: $('#para').text()+"Helloweba.com",
afterCopy: function(){
$("#para").css("background-color",'#cff');
$("<span id='msg'/>").insertAfter($('#copy_p')).text('复制成功').fadeOut(2000);
}
});
$('#mytext').focus(function(){
var txt = $(this).val();
if(txt=='请输入内容'){
$(this).val('');
}
});
});
</script>
</head>

<body>
<div id="main">
<div class="demo">
<textarea id="mytext">请输入内容</textarea><br/>
<a href="#" id="copy_input" class="copy">复制内容</a>
</div>
</div>
</body>
</html>

View Code

参数说明

path：swf调用路径，必须，如js/ZeroClipboard.swf，ZeroClipboard.swf文件已存在下载包中。

copy：复制的内容，必须，任意字符串，也可以是回调函数返回的内容

beforeCopy：复制内容前回调函数，可选

afterCopy：复制内容后回调函数，可选

说明:这种方式我在复杂的样式环境下测试,flash定位不到点击按钮,在普通的样式里面没有问题,解决方案是需要修改源代码,可以查看我另外一篇博文:

jQuery ZeroClipboard中Flash定位不准确的解决方案

您也可以到zclip官网了解更多信息：http://steamdev.com/zclip/

完整DEMO下载:点击下载

原文地址参考:http://www.helloweba.com/view-blog-222.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航