在实现功能时写的一个小demo，可以实现点击复制内容（任何你需要copy的文字内容data）。

　　经测试，可兼容 chrome, edge, firefox, ie, opera, safari，至于版本的话肯定是有限制的，你可以尝试一下版本的底线。

　　下面就是demo，你可以使用在任何地方。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>js实现copy</title>

 </head>

 <body>

     <div>

         <span>阳光总在风雨后。</span>

     </div>

     <input type="text" name="" placeholder="请粘贴测试">

 <script type="text/javascript">

     (function(){

         var span = document.getElementsByTagName('span')[0];

         span.addEventListener('click', function(event){

             var t, p, i;

             t = event.target || event.srcElement;             p = t.parentNode;

             i = document.createElement('input');

             i.width = 0;

             i.height = 0;

             i.value = t.innerText;

             p.appendChild(i);

             i.focus();

             i.setSelectionRange(0, i.value.length);

             document.execCommand('copy', true);

             p.removeChild(i);

         },false);

     })();

 </script>

 </body>

 </html>

　　哦，对了，如果是IE的话，你应该用IE的事件处理程序attachEvent。

　　谢谢你的浏览，如果觉得不错，请点赞TT。

js实现点击copy，可兼容的更多相关文章

  1. js 实现点击复制文本内容

    js  实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" ...

  2. 源生JS实现点击复制功能

    之前在工作中,有位同事问过我一个问题,JS如何实现点击复制功能.给他解决后现在来总结归纳一下,顺便做个笔记. PS:此乃本人第一篇博客(跟着同事大佬学习),涉及知识尚浅,如有任何意见和建议请告知于我. ...

  3. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  4. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  5. css+js整站变灰（兼容IE7+）

    原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...

  6. 基于原生js的返回顶部组件，兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  7. js模拟点击事件实现代码

    js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

  8. 重写JS的鼠标右键点击菜单

    重写JS的鼠标右键点击菜单 该效果主要有三点,一是对重写的下拉菜单的隐藏和显示:二是屏蔽默认的鼠标右键事件:三是鼠标左键点击页面下拉菜单隐藏. 不多说,上html代码: 1 <ul id=&qu ...

  9. JS控制CSS3，添加浏览器兼容前缀

    不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); ...

随机推荐

  1. SQL Server中关于基数估计如何计算预估行数的一些探讨

    关于SQL Server 2014中的基数估计,官方文档Optimizing Your Query Plans with the SQL Server 2014 Cardinality Estimat ...

  2. CentOS 7安装Docker

    在虚拟机CentOS 7上安装Docker   ## 零:检查前提条件:   在Red Hat 和Red Hat系列的Linux发行版中,安装Docker所需的前提提交并不多.     ### 1.内 ...

  3. 蓝桥杯-四平方和-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  4. Oracle中碰到的函数和关键字收集

    一.时间处理函数 trunc(sysdate) 返回日期 to_date() to_char(sysdate,'yyyy-mm-dd hh24:mi:ss') to_number() 转为数字 二.字 ...

  5. Nuget常用命令操作

    Nuget是一个.NET平台下的开源的项目,它是Visual Studio的扩展.在使用Visual Studio开发基于.NET Framework的应用时,Nuget能把在项目中添加.移除和更新引 ...

  6. zoj 1013 Great Equipment DP

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=13 很经典的一个DP的题目 定义dp[i][num1][num2]表示 ...

  7. [刷题]算法竞赛入门经典(第2版) 5-9/UVa1596 - Bug Hunt

    //开学了,好烦啊啊啊啊啊!怎么开个学那么多破事情!!都俩星期了,终于有时间写出来一道题 题意:不难理解,不写了.这几天忙的心累. 代码:(Accepted, 0.010s) //UVa1596 - ...

  8. JAVA自增自减的玄机

    先看下面代码: ; i = i++; System.out.println(i); 请问:输出结果为多少? ---------------------------------------------- ...

  9. Spring AOP的切入点表达式

    在spring Aop中要使用AspectJ的切点表达式语言来定义切点.Spring仅仅支持AspectJ切点指示器的一个子集.下表列出了Spring AOP所支持的AspectJ切点指示器. 在Sp ...

  10. MyBatis之级联小结

    在这之前我们知道了MyBatis为我们提供了三种级联:一对一关系(assocation).一对多关系(collection).鉴别器(discriminator).在最后一个鉴别器例子中,看到了当层级 ...