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>

JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单的更多相关文章

  1. IE浏览器实现复制数据到剪贴板

    IE浏览器实现复制数据到剪贴板非常简单,代码如下: if (window.clipboardData) { window.clipboardData.clearData(); window.clipb ...

  2. 转：jQuery弹出二级菜单

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  3. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  4. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  5. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  6. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  7. jQuery第二课 点击弹出一个提示框

    选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...

  8. 【ABAP系列】SAP ALV 导出报表数据 始终使用选定的格式”，一旦勾上，就再也不会弹出选择框了。

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ALV 导出报表数据 始 ...

  9. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...

随机推荐

  1. linux 安装禅道 和 CentOS 7 开放防火墙端口 命令

    linux 安装禅道链接:  https://www.cnblogs.com/maohuidong/p/9750202.html CentOS 7 开放防火墙端口 命令 链接:https://www. ...

  2. k8常用操作

    1.当delete pod失败时,使用下面命令强制删除Terminging状态下的pod kubectl delete pod xxxxxx --grace-period=0 --force 2.

  3. Qt creator中配置opencv win7 64bit

    配置方法的原文来自https://www.librehat.com/qt-5-2-vs2012-opencv-2-4-7-dev-environment-setup-tutorial/. 补充,在张静 ...

  4. CTF -bugku-web-web基础 矛盾

    ---恢复内容开始--- 以GET方式获取参数 is_numeric()函数是判断是否为数字或者数字字符串 所以不能是数字或者数字字符串,但是下面$num == 1 有要求为数字1 所以构造1+任意字 ...

  5. eclipse导入tomcat源码

    我的开发环境:windows7  64位 一.官网下载tomcat源码.在此奉上一站地址:http://archive.apache.org/dist/tomcat/: 二.编译源码生成.jar文件: ...

  6. hdu1232 城镇间修路（并查集）

    问题是这样的: Problem Description 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇 ...

  7. jenkins job 杀进程不成功解决办法

    jenkins_job #!/bin/bash set -ex #打印执行过程 BUILD_ID=DONTKILLME #防止自杀 ssh dataexa@192.168.1.65 > /dev ...

  8. Python 重新加载模块

    每个Python文件中的import modulename只被加载一遍,如果在运行过程中,这个Module被更改了,即使在在interpretor中运行import 语句也没用. 可以使用import ...

  9. UVA 558 SPFA 判断负环

    这个承认自己没看懂题目,一开始以为题意是形成环路之后走一圈不会产生负值就输出,原来就是判断负环,用SPFA很好用,运用队列,在判断负环的时候,用一个数组专门保存某个点的访问次数,超过了N次即可断定有负 ...

  10. iPhoneX的后遗症要持续多久？

    iPhone X的推出算得上苹果历史上的大事件,这款梳着刘海头型的手机作为iPhone十周年纪念款手机,承载着苹果和整个产业链巨大的希望,正因如此,包括苹果在内的大量企业,把宝都压到了这款手机上.后来 ...