复制内容到剪切板 zclip使用

最新推荐文章于 2016-07-12 16:28:09 发布

wangzhantao

最新推荐文章于 2016-07-12 16:28:09 发布

阅读量182

点赞数

分类专栏： web 前端处理文章标签： java javascript ViewUI

本文链接：https://blog.csdn.net/wangzhantao/article/details/84621026

版权

web 前端处理专栏收录该内容

57 篇文章 0 订阅

订阅专栏

今天要做一个点击按钮复制内容到剪切板的功能，弄了半天终于弄出来了，共享给大家。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" import="java.util.Date"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

</head>
<body>

   	<input name="myurl"   id="myurl" type="text" class="copy-tex" readonly="readonly" value="<%=new Date() %>"/>
   	<input  type="button" class="copy-btn" value="复制" id="copyBtn" οnclick="setCopyLink()"/>

	<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/script/ZeroClipboard/jquery.zclip.min.js"></script>
	<script>
	$(function(){
 
		//复制url
		var text=$("#myurl").val();
	    //引入 Zero Clipboard flash文件   
	    ZeroClipboard.setMoviePath( "${pageContext.request.contextPath}/script/ZeroClipboard/ZeroClipboard.swf" );   
	    //新建对象   
	    clip = new ZeroClipboard.Client();   
	    //设置指向光标为手型   
	    clip.setHandCursor( true );   
	    //通过传入的参数设置剪贴板内容   
	    clip.setText(text);   
	    //添加监听器，完成点击复制后弹出警告   
	    clip.addEventListener("complete", function (client, text) {   
	        alert("已经成功复制到剪帖板上");   
	    });    
	  //绑定触发对象按钮ID 
	     if (!!window.ActiveXObject){
	 	    	//alert('IE浏览器');
	 	    	var isIE=!!window.ActiveXObject;
	 	    	 isIE6=isIE&&!window.XMLHttpRequest;
	 	    	var isIE8=isIE&&!!document.documentMode;
	 	    	var isIE7=isIE&&!isIE6&&!isIE8;
	 	    	if (isIE6){
	 	    		//alert('ie6');
	 	    		}else if (isIE7){
	 	    		//alert('ie7');
	 	    	}else{
	 	    	 clip.glue("copyBtn");
	 	       } 
	     }else{
	     		 clip.glue("copyBtn");
	     		 //alert("火狐");
	     	}
 
	   
	});
	function setCopyLink(){
		var urlTxt=$("#myurl").val();
		copyToClipboard(urlTxt);
	}
	function copyToClipboard(txt) {
	    if (window.clipboardData) {
	        window.clipboardData.clearData();
	        window.clipboardData.setData("Text", txt);
	        alert("已经成功复制到剪帖板上！");
	    } else if (navigator.userAgent.indexOf("Opera") != -1) {
	        window.location = txt;
	    } else if (window.netscape) {
	        try {
	            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
	        } catch (e) {
	            alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");
	        }
	        var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
	        if (!clip) return;
	        var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
	        if (!trans) return;
	        trans.addDataFlavor('text/unicode');
	        var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
	        var copytext = txt;
	        str.data = copytext;
	        trans.setTransferData("text/unicode", str, copytext.length * 2);
	        var clipid = Components.interfaces.nsIClipboard;
	        if (!clip) return false;
	        clip.setData(trans, null, clipid.kGlobalClipboard);
	        alert("已经成功复制到剪帖板上！");
	    }
	}
	</script>						
						
</body>


</html>

wangzhantao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制内容到剪切板 zclip使用

今天要做一个点击按钮复制内容到剪切板的功能，弄了半天终于弄出来了，共享给大家。 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.Date"%&gt;&lt;%@ taglib prefix="c&quo
复制链接

扫一扫