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

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

效果如下所示:

下面将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能,只说如何使用,不讲原理。其实IE上有个方法可以实现点击复制，但是由于只是IE独有，所以我们不提倡。而Zclip是利用一个隐藏的flash文件来完成复制的功能，关键是它兼容当前各主流浏览器。

我在在本地测试不成功,所以最好部署到Tomcat上面进行测试。

jsp文件:

首先需要在页面中载入jquery库和zclip插件

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>

接着我们在页面中的body部分加入如下代码：

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

页面中放置了一个输入框textarea，当然也可以是其他html元素，然后就是一个复制按钮，也可以是链接文本形式。

Javascript:

当点击“复制内容”时，调用zclip插件，并提示复制成功，请看代码：

$(function(){ 
    $('#copy_input').zclip({ 
        path: 'js/ZeroClipboard.swf', 
        copy: function(){//复制内容 
            return $('#mytext').val(); 
        }, 
        afterCopy: function(){//复制成功 
            $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功'); 
        } 
    }); 
});

值得注意的是如果是复制的内容来自输入框input、textarea等，copy对象使用：

copy: function(){ 
    return $('#mytext').val(); 
}

如果是复制的内容来自页面元素div、p之类的，copy对象使用：

copy: $('#mytext').text();

这样就完成了复制内容到剪贴板的功能。

完整代码如下:

<%@ 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