前言：
常规利用JS编写的网页复制功能是最简单的方法，但是只对IE有效，无法做到兼容其它浏览器，对其他浏览器也就只能弹窗提示用户手动复制了。
1 <script type="text/javascript"> 2 function copyToClipBoard(t) { 3 if (isIE()) { 4 var clipBoardContent = ""; 5 if (t == 1) { 6 clipBoardContent = document.getElementById("wz_contents").value; 7 } else { 8 clipBoardContent = document.getElementById("tp_contents").value; 9 } 10 clipboardData.setData("Text", clipBoardContent); 11 alert("您已成功复制了此地址"); 12 } 13 else { 14 if (t == 1) { 15 document.getElementById("wz_contents").select(); 16 } else { 17 document.getElementById("tp_contents").select(); 18 } 19 alert("当前浏览器不支持此功能，请按Ctrl+C进行复制！"); 20 } 21 return true; 22 } 23 function isIE(number) { 24 if (typeof (number) != number) { 25 return !!document.all; 26 } 27 } 28 </script>
这种方法是很简单，但是用户体验很不好。使用一种能兼容多种主流浏览器的复制功能就很有必要了。
解决方法：使用ZeroClipboard插件和Jquery实现复制功能
ZeroClipboard是利用flash为媒介实现兼容各浏览器复制功能一款jquery插件可以兼容ie6.0及以上版本浏览器、chrome内核浏览器、firefox内核浏览器等。
实例代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="jquery.js"></script>//1. 引入jquery文件 7 </head> 8 <body> 9 <div class="demo-area"> 10 <button id="d_clip_button" class="my_clip_button" title="Click me to copy to clipboard." data-clipboard-target="fe_text" data-clipboard-text="Default clipboard text from attribute"><b>Copy To Clipboard...</b></button> 11 <h4><label for="fe_text">Change Copy Text Here</label></h4> 12 <textarea id="fe_text" cols="50" rows="3">Copy me!</textarea> 13 </div> 14 <h4>Debug Console:</h4> 15 <div id="d_debug"></div> 16 17 <!--2. 导入ZeroClipboard.min.js文件--> 18 <script type="text/javascript" src="ZeroClipboard.min.js"></script> 19 <script language="JavaScript"> 20 21 $(document).ready(function() { 22 var clip = new ZeroClipboard($("#d_clip_button"), { 23 moviePath: "ZeroClipboard.swf" 24 }); 25 26 clip.on('load', function (client) { 27 debugstr("Flash movie loaded and ready."); 28 }); 29 30 clip.on('noFlash', function (client) { 31 $(".demo-area").hide(); 32 debugstr("Your browser has no Flash."); 33 }); 34 35 clip.on('wrongFlash', function (client, args) { 36 $(".demo-area").hide(); 37 debugstr("Flash 10.0.0+ is required but you are running Flash " + args.flashVersion.replace(/,/g, ".")); 38 }); 39 40 clip.on('complete', function (client, args) { 41 debugstr("Copied text to clipboard: " + args.text); 42 }); 43 44 // jquery stuff (optional) 45 function debugstr(text) { 46 $("#d_debug").append($("<p>").text(text)); 47 } 48 }); 49 </script> 50 </body> 51 </html>
代码说明：
1. 要在服务器环境下测试才有效，静态网页时是没有反应的。
2. html中需要导入文件：
3. 实例文件下载：Demo
4. 使用中下载源码后根据需要修改即可。
欢迎转载，转载请注明出处：http://www.cnblogs.com/xyyt/p/3598946.html