ZeroClipboard.js实现js复制功能

最新推荐文章于 2017-12-16 13:53:10 发布

cikeyouling

最新推荐文章于 2017-12-16 13:53:10 发布

阅读量202

点赞数

分类专栏： javascript 文章标签：跨浏览器复制

本文链接：https://blog.csdn.net/cikeyouling/article/details/84525409

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

cikeyouling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ZeroClipboard.js实现js复制功能

注意：此处需要使用的ZeroClipboard.js版本为1.0.7，附件中有所需js文件，如果js版本不对这个demo可能不好使&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; 复制de
复制链接

扫一扫

专栏目录