注意:此处需要使用的ZeroClipboard.js版本为1.0.7,附件中有所需js文件,如果js版本不对这个demo可能不好使
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><HTML> <HEAD> <TITLE> 复制demo </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript"src="ZeroClipboard.js" ></script> <BODY> <INPUT TYPE="text" NAME="" id="txt" value="复制的内容"> <input type="button" value="复制" id="BTNcOPY_1" /> </BODY> <script type="text/javascript"> $(function(){ $("input[id^=BTNcOPY_]").each(function(){ //ZeroClipboard.swf和ZeroClipboard.js不在相同目录下需要设置动画文件路径 //ZeroClipboard.setMoviePath("${base}/web/js/zeroclipboard-1.0.7/ZeroClipboard.swf"); var clip = new ZeroClipboard.Client(); clip.setHandCursor(true); var obj = $(this); var id = $(this).attr("id"); clip.glue(id); //鼠标移上时改变按钮的样式 clip.addEventListener( "mouseOver", function(client) { obj.css("color","#FF6600"); var txt=$("#txt").val();//设置复制内容 clip.setText(txt); }); //鼠标移除时改变按钮的样式 clip.addEventListener( "mouseOut", function(client) { obj.css("color",""); }); //这个是复制成功后的提示 clip.addEventListener( "complete", function(){ alert("已经复制到剪切板!"); }); }); }); </script></HTML>
?
?