今天要做一个点击按钮复制内容到剪切板的功能,弄了半天终于弄出来了,共享给大家。
<%@ 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" onclick="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>
相关推荐
`jQuery zclip`是一个实用的JavaScript插件,它允许用户通过简单的API将特定文本或内容复制到计算机的剪贴板。这个插件依赖于`ZeroClipboard`库,该库利用了Flash技术来实现跨浏览器的剪贴板交互。在介绍`jQuery ...
jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player。
复制页面内容到剪贴板兼容各浏览器 ##引用方式 require('jquery-zclip'); ##使用方法 $('#copy_input').zclip({ path: __uri('../../components/jquery-zclip/ZeroClipboard.swf'), copy: function(){//复制内容...
jQuery zclip插件是一个基于jQuery的工具,它能够帮助开发者在不同的浏览器中实现复制文本到剪切板的功能。这项技术在Web开发中尤其有用,因为直到最近,许多浏览器都还没有提供一个简单的方式来实现这一功能,尤其...
描述中提到的"jquery+flash实现点击复制到剪切板"是指使用jQuery库来处理DOM元素和事件,同时利用Flash技术作为跨浏览器的剪贴板交互手段。这是因为Flash在早期浏览器中广泛支持,能够提供跨平台的剪贴板API。然而,...
jQuery实现复制到粘贴板的功能主要依赖于第三方插件ZeroClipboard。这个插件利用了Flash技术,因为Flash具备与系统剪贴板交互的能力,而JavaScript本身由于安全限制无法直接操作剪贴板。以下将详细介绍如何使用...