一、jQuery-zclip
jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。
jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player。
1、jQuery-zclip插件官网
ZeroClipboard.swf下载地址
开源地址:https://github.com/patricklodder/jquery-zclip
2、jQuery-zclip用法
//引入jQuery-zclip相关js及swf文件
<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> <script type="text/javascript" src="<%=path%>/resources/js/jquery.zclip.min.js"></script> <script type="text/javascript"> $(function(){ $("#cp-btn").zclip({ path:'<%=path%>/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中 copy:function(){ return $('#inviteUrl').val(); } }); }); </script> <div class="form-row"> <div class="col-md-5"> <input class="form-control" value="" id="inviteUrl"/> </div> <div class="col-md-1"> <a href="javascript:void(0)" id="cp-btn" class="btn btn-default btn-block btn-clean">复 制</a> </div> </div>
配置说明
path:swf的路径(复制主要是用flash解决不同浏览器的复制)
copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容
beforeCopy:复制之前要做的function;
afterCopy:复制之后要做的function;
提供了3个方法
show:$(selected).zclip('show');//复制功能有效
hide:$(selected).zclip('hide');//复制功能无效
remove:$(selected).zclip('remove');//完全移除复制功能
3、演示效果
运行成功后,点击复制按钮,会弹出一个提示框,表示复制到剪切板生效了,如下:
弹出框出现“Copied text to clipboard”英文字符,有点不符国人使用习惯,把它改为“成功复制到剪切板”,在jquery.zclip.min.js文件中找到“Copied text to clipboard”替换成“成功复制到剪切板”就可以了,效果如下:
使用afterCopy事件,将不会出现弹出框,可以自定义弹出框
二、jquery.zeroclipboard
插件地址:http://plugins.jquery.com/zeroclipboard/
Zero Clipboard的官方地址:http://zeroclipboard.org/
开源地址:https://github.com/zeroclipboard/jquery.zeroclipboard
跨浏览器复制神器 ZeroClipboard 2.x快速入门详解
http://www.365mini.com/page/zeroclipboard-2_x-quick-start.htm
提醒:没有实践过
三、IE下的复制
window.clipboardDate.setData("Text", "复制文本");
alert("复制成功");
基本上没有直接这样使用,记录下方法
它需要ActiveXObject的支持
function allowActiveXObject() { if (!!window.ActiveXObject || "ActiveXObject" in window) return true; else return false; }
四、弹出手动复制
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; alert("复制成功!"); } 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 = new Object(); 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("复制成功!"); } else { window.prompt("复制到剪贴板: 按 CTRL+C", txt); } }
oncopy 事件
http://www.runoob.com/jsref/event-oncopy.html
参考文章:实现JS复制、粘贴,Chrome/Firefox下可用