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）下面这些是实现直接将值传给剪贴板，但都存在浏览器的兼容性和组件限制的情况

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript">

         //方法1:textarea或者input等支持select()的dom组件

         function copyUrl2()

         {

             var Url2=document.getElementById("biao1");

             Url2.select(); // 选择对象

             document.execCommand("Copy"); // 执行浏览器复制命令

             alert("已复制好，可贴粘。");

         }

         //方法2:window.clipboardData.setData()这个方法限IE

         function copyToClipBoard(){

             var clipBoardContent="";

             clipBoardContent+=document.title;

             clipBoardContent+="";

             clipBoardContent+=this.location.href;

             window.clipboardData.setData("Text",clipBoardContent);

             alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友");

         }

         //方法3:execCommand("copy"),这个方法在input组件上还是有效的

         function oCopy(obj){

             obj.select();

             js=obj.createTextRange();

             js.execCommand("Copy")

             alert("复制成功!");

         }

     </script>

 </head>

 <body>

 <!--方法1-->

 <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>

 <input type="button" onClick="copyUrl2()" value="点击复制代码" />

 <br>

 <!--方法2-->

 <!--

 <input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址，传给QQ/MSN上的好友">

 -->

 <!--方法3-->

 <!--

 <input onclick="oCopy(this)" value="你好.要copy的内容!">

 -->

 </body>

 </html>

（2）采用clipboard.js和zeroclipboard.js插件的基础上；在你想要的采用的触发方式的方法里，采用模拟鼠标click事件

如：$('#btn').trigger('click');这个与$('#btn').click()方法一致；

当然，这个方法证明是不可行的，因为插件内部估计是有加模拟鼠标点击事件跟用户真实点击事件的判断

（3）最后采用了一个很垃圾的折中办法，鼠标右键点击，先弹出一个复制菜单。点击菜单选择复制

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script type="text/javascript" src="//img.chinanetcenter.com/js/jquery/jquery-1.8.1.min.js"></script>

     <style>

         #myMenu{

             position:absolute;

             width: 80px;

             border:grey 1px solid;

             display:none;

         }

         .js-copy-item{

             list-style: none;

             width: 80px;

             height: 20px;

             line-height: 20px;

             text-align: center;

         }

     </style>

     <script>

     $(function() {

         $('.ui-contextmenu').on('contextmenu',function(e){//右键弹出菜单

             $('#myMenu').show().css({

                 'top':e.pageY+13+'px',

                 'left':e.pageX+13+'px'

                 });

         e.preventDefault();//防止点击事件冒泡

         });

             $(window).click(function(){//鼠标 点击任意位置，菜单消失

             $('#myMenu').hide();

         })

    });

     </script>

 </head>

 <body>

 <div id="myMenu" >

     <ul>

         <li class="js-copy-item">复制</li>

     </ul>

 </div>

 <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. HashMap面试总结

    作者:孤独烟 出处: http://rjzheng.cnblogs.com/ 文章由点及线再及面,写的非常好.修改部分内容 (1) HashMap的实现原理 看过HashMap源码吗,知道原理吗? h ...

  2. 【2017西安邀请赛:A】XOR(线段树+线性基)

    前言:虽然已经有很多题解了,但是还是想按自己的理解写一篇. 思路:首先分析题目 一.区间操作 —— 线段树 二.异或操作 —— 线性基 这个两个不难想,关键是下一步的技巧 “或”运算 就是两个数的二进 ...

  3. Spring原理系列一:Spring Bean的生命周期

    一.前言 在日常开发中,spring极大地简化了我们日常的开发工作.spring为我们管理好bean, 我们拿来就用.但是我们不应该只停留在使用层面,深究spring内部的原理,才能在使用时融汇贯通. ...

  4. UVALive 3942 字典树+dp

    其实主要是想学一下字典树的写法,但这个题目又涉及到了DP:这个题目要求某些单词组成一个长子串的各种组合总数,数据量大,单纯枚举复杂度高,首先肯定是要把各个单词给建成字典树,但是之后该怎么推一时没想到. ...

  5. 不重复,distinct，row_number() over(partition by)

    1.查询不重复的字段 select distinct name from table 2.查询某个字段不重复的,所有内容 sql根据某一个字段重复只取第一条数据 select s.* from ( s ...

  6. Java中常用的API（三）——缓冲区字符串

    前两节中分别介绍了Object和String,这一节主要介绍StringBuffer和StringBuilder. StringBuffer 由于String是不可变的,所以导致String对象泛滥, ...

  7. Python笔记_第一篇_面向过程_第一部分_3.进制、位运算、编码

    通过对内存这一个部分的讲解,对编程会有一个相对深入的认识.数据结构是整个内存的一个重要内容,那么关于数据结构这方面的问题还需要对进制.位运算.编码这三个方面再进行阐述一下.前面说将的数据结构是从逻辑上 ...

  8. Aras Innovator时间验证

    //方法名:bcs_Nexteer_CheckTime //功能描述:开始和结束日期对比 //原作者:joe //创建时间:20141226 //版权所有(C)JOE.FAN //debugger; ...

  9. 编程作业3.1：Multi-class classification(One-vs-all)

    题目: 在本次练习中,你将使用逻辑回归和神经网络来识别手写数字(从0到9). 今天,自动手写数字识别被广泛使用,从识别信封上的邮政编码到识别银行支票上的金额.这个练习将向你展示如何将你所学的方法用于此 ...

  10. docker---设置镜像加速器

    国内从 Docker Hub 拉取镜像有时会遇到困难,此时可以配置镜像加速器,国内很多云服务商都提供了国内加速器服务,如: Azure 中国镜像: https://dockerhub.azk8s.cn ...