在实现功能时写的一个小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. java并发程序——BlockingQueue

    概述 BlockingQueue顾名思义'阻塞的队列',是指在:队列的读取行为被阻塞直到队列不为空时,队列的写入行为被阻塞直到队列不满时.BlockingQueue是java.util.concurr ...

  2. JS判断当前手机类型

    window.onload = function () { var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.ind ...

  3. mysql sql语句

    1.数据库和表的操作 创建 create修改 alter删除 drop查看 show 1.1创建数据库 CREATE DATABASE [IF NOT EXISTS] db_name    [crea ...

  4. WPF+MVVM学习总结 DataGrid简单案例

    一.WPF概要 WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分.它提供了统一的 ...

  5. Oracle的正则函数之regexp_like

    前言:最近接到一个让人肝疼的需求,用到了正则表达式去匹配字符串,顺便巩固一下oracle几个正则表达式的用法 例子: 找出为带小数点后两位的数字,不论正负.比如3.12,-4.56这样的.而3.145 ...

  6. 下拉菜单制作——利用CSS实现的一个实例

    本文实现了一个经典的下拉菜单的制作. 首先,写出Html部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  7. nodeJS中的包

    前面的话 Node组织了自身的核心模块,也使得第三方文件模块可以有序地编写和使用.但是在第三方模块中,模块与模块之间仍然是散列在各地的,相互之间不能直接引用.而在模块之外,包和NPM则是将模块联系起来 ...

  8. Java Date Classes

    References: [1] http://tutorials.jenkov.com/java-date-time/index.html [2] https://docs.oracle.com/ja ...

  9. Servlet起步

    什么是Servlet Servlet是sun公司制定的用来扩展web服务器功能的组件规范,通俗理解为遵循Servlet规范开发的实现了某个功能的Java组件.该组件没有 main 方法,不能独立地运行 ...

  10. Json及Json字符串

    JSON(JavaScript Object Notation)是一种独立于开发语言的用于存储和交换文本数据的格式,JSON 语法是JavaScript 语法的子集. Json 可以保存数组格式和对象 ...