JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单
1.如果小伙伴们只是想实现点击某个按钮（通过click事件）实现复制功能。
那小哥哥我在这里推荐大家使用2个非常好用的插件
（1）clipboard.js：纯js插件，无需flash，相对来说更轻量级一些（比较推荐）
具体用法和插件下载见如下官方地址：https://clipboardjs.com/
（2）zeroclipboard.js:使用js+swf实现复制功能
同上：http://zeroclipboard.org/
Tip：上面两个插件的共同点是，通过配置触发dom（如button等），text（需要
复制到剪贴板的内容）；But，都必须通过【click】触发复制功能。
2.如果你想通过别的event触发复制功能：比如右键实现复制功能
（1）下面这些是实现直接将值传给剪贴板，但都存在浏览器的兼容性和组件限制的情况
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript"> 7 //方法1:textarea或者input等支持select()的dom组件 8 function copyUrl2() 9 { 10 var Url2=document.getElementById("biao1"); 11 Url2.select(); // 选择对象 12 document.execCommand("Copy"); // 执行浏览器复制命令 13 alert("已复制好，可贴粘。"); 14 } 15 //方法2:window.clipboardData.setData()这个方法限IE 16 function copyToClipBoard(){ 17 var clipBoardContent=""; 18 clipBoardContent+=document.title; 19 clipBoardContent+=""; 20 clipBoardContent+=this.location.href; 21 window.clipboardData.setData("Text",clipBoardContent); 22 alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友"); 23 } 24 //方法3:execCommand("copy"),这个方法在input组件上还是有效的 25 function oCopy(obj){ 26 obj.select(); 27 js=obj.createTextRange(); 28 js.execCommand("Copy") 29 alert("复制成功!"); 30 } 31 32 </script> 33 </head> 34 <body> 35 <!--方法1--> 36 <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea> 37 <input type="button" onClick="copyUrl2()" value="点击复制代码" /> 38 <br> 39 <!--方法2--> 40 <!-- 41 <input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址，传给QQ/MSN上的好友"> 42 --> 43 <!--方法3--> 44 <!-- 45 <input onclick="oCopy(this)" value="你好.要copy的内容!"> 46 --> 47 48 </body> 49 </html>
（2）采用clipboard.js和zeroclipboard.js插件的基础上；在你想要的采用的触发方式的方法里，采用模拟鼠标click事件
如：$('#btn').trigger('click');这个与$('#btn').click()方法一致；
当然，这个方法证明是不可行的，因为插件内部估计是有加模拟鼠标点击事件跟用户真实点击事件的判断
（3）最后采用了一个很垃圾的折中办法，鼠标右键点击，先弹出一个复制菜单。点击菜单选择复制
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="//img.chinanetcenter.com/js/jquery/jquery-1.8.1.min.js"></script> 7 <style> 8 #myMenu{ 9 position:absolute; 10 width: 80px; 11 border:grey 1px solid; 12 display:none; 13 } 14 .js-copy-item{ 15 list-style: none; 16 width: 80px; 17 height: 20px; 18 line-height: 20px; 19 text-align: center; 20 } 21 22 </style> 23 <script> 24 $(function() { 25 $('.ui-contextmenu').on('contextmenu',function(e){//右键弹出菜单 26 $('#myMenu').show().css({ 27 'top':e.pageY+13+'px', 28 'left':e.pageX+13+'px' 29 }); 30 e.preventDefault();//防止点击事件冒泡 31 }); 32 $(window).click(function(){//鼠标 点击任意位置，菜单消失 33 $('#myMenu').hide(); 34 }) 35 }); 36 37 </script> 38 </head> 39 <body> 40 <div id="myMenu" > 41 <ul> 42 <li class="js-copy-item">复制</li> 43 </ul> 44 </div> 45 <span class="ui-contextmenu">来呀，右键我！</span>
