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>
参数说明
path：swf调用路径，必须，如js/ZeroClipboard.swf，ZeroClipboard.swf文件已存在下载包中。
copy：复制的内容，必须，任意字符串，也可以是回调函数返回的内容
beforeCopy：复制内容前回调函数，可选
afterCopy：复制内容后回调函数，可选
说明:这种方式我在复杂的样式环境下测试,flash定位不到点击按钮,在普通的样式里面没有问题,解决方案是需要修改源代码,可以查看我另外一篇博文:
jQuery ZeroClipboard中Flash定位不准确的解决方案
您也可以到zclip官网了解更多信息：http://steamdev.com/zclip/
完整DEMO下载:点击下载