js实现复制到剪切板,兼容所有浏览器
做项目需要,以为很简单,却找了很久,大多是相同的,还有些看不太懂,最后终于找到了一个叫做ZeroClipboard的东西,其实网上一搜就有,但是自己搞却不能用,苦闷折腾了几天,终于发现这个东西必须要部署在服务器上才有效果!本地文件那样打开是没效果的!还有一点坑爹的,如果把复制按钮放到td标签中是会失效的!!折腾啊!
这东西用到平常用不到的两个东西,一个jquery.zclip.js和ZeroClipboard.swf,下面是例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>点击复制到剪切板</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.zclip.js"></script> <script type="text/javascript"> $(document).ready(function() { var summary=‘要复制的文本‘; if(window.clipboardData){ $(‘#copy_button‘).click(function(){ window.clipboardData.setData(‘text‘, summary); alert("已成功复制到剪切板!"); }); }else{ $(‘#copy_button‘).zclip({ path:‘ZeroClipboard.swf‘, copy:function(){return summary;}, afterCopy:function(){alert("已成功复制到剪切板!");} }); } }); </script> </head> <body> <input id="copy_button" type="button" value="wefwefwef"/> </body> </html>
提示:必须放在服务器,本地没效果最终提示:
td标签中的元素无效
jquery.zclip.js和ZeroClipboard.swf下载
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。