在实现功能时写的一个小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. jquery获取文件名称

    $("#fileupload").on("change",function(){ var filePath=$(this).val(); if(filePath ...

  2. windows下配置mysql数据库主从

    所用到工具: Mysql.Navicat Premium: 主库设置: 一．设置my.ini 文件: 1.在安装目录下找到my.ini 文件: 默认路径:C:\Program Files\MySQL\ ...

  3. mysql语句insert后取到返回的主键id

    Q:   有时候做类似接口里的数据订正,需要取到insert语句返回的id主键,在程序里通过对象返回好取,但是写sql怎么取到呢? A:  用select @@identity得到上一次插入记录时自动 ...

  4. 手机共享成wifi热点电脑无法上网的问题

    第二次遇到这样的问题,每次百度都不能解决我遇到的问题.上一次已经自己鼓捣着解决了,后来忘记怎么弄好的.第二次遇到这个问题,又是浪费了许多时间后,偶然弄好了,突然想起来上次就是这样弄好的.所以就针对我自 ...

  5. ScheduledFuture和RunnableScheduledFuture详解

      ScheduledFuture java.util.concurrent 接口 ScheduledFuture<V> 类型参数:     V - 此 Future 返回的结果类型. 所 ...

  6. 弹出输入内容prompt

    <script> window.onload = function(){ var oBtn = document.getElementById( "btn" ); oB ...

  7. Spring+SpringMVC+MyBatis深入学习及搭建(二)——MyBatis原始Dao开发和mapper代理开发

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6869133.html 前面有写到Spring+SpringMVC+MyBatis深入学习及搭建(一)——My ...

  8. VS2010 使用 EF5 框架步骤

    1.安装 nuget , 在nuget里联机查找 EF 5.x DbContext Generator for C# 模版下载安装 2.nuget 控制台执行 Install-Package Enti ...

  9. Another kind of Fibonacce(矩阵快速幂，HDU3306）

    Another kind of Fibonacci Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...

  10. Day4-迭代器

    for循环的数据类型: 1.集合数据类型,如list列表,tuple元组,dict字典,set集合,str字符串等: 2.generator生成器,包括生成器和带yield的generator fun ...