`
西北小强
  • 浏览: 342759 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ZeroClipboard.js实现js复制功能

跨浏览器复制 
阅读更多

注意：此处需要使用的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>

 

 

分享到：
| 将一个js对象装换为一个JSON串
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics