在实现功能时写的一个小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. Vue2.x中的父子组件相互通信

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template ...

  2. [C#学习]1.Hello World

    在很多时候我们都是被helloworld带入编程的世界的,所以这句话应该算是我们程序员最熟悉的一句话了把.所以在这里,那我也照样以helloworld为例子来引入我们的C#学习. 在往常的hellow ...

  3. Lucene5.5.4入门以及基于Lucene实现博客搜索功能

    前言 一直以来个人博客的搜索功能很蹩脚,只是自己简单用数据库的like %keyword%来实现的,所以导致经常搜不到想要找的内容,而且高亮显示.摘要截取等也不好实现,所以决定采用Lucene改写博客 ...

  4. hive集成sentry

    1.安装配置sentry 详细步骤见上一篇安装配置sentry 2.配置hive 2.1 Hive-server2集成Sentry 在 /etc/hive/conf/hive-site.xml中添加: ...

  5. python3 selenium 登录操作

    使用场景: 测试过程中,有的时候需要登录才可以进行其他操作 举例说明: # coding=utf-8 """ :author: 花花测试 :time: 2017.05.0 ...

  6. centOS7下安装GUI图形界面

    1.如何在centOS7下安装GUI图形界面 当你安装centOS7服务器版本的时候,系统默认是不会安装GUI的图形界面程序,这个需要手动安装CentOS7 Gnome GUI包. 2.在系统下使用命 ...

  7. Java8新特性-Lambda表达式

    1.  什么是Lambda表达式? Lambda表达式就是可以把函数作为参数传递,或者说把代码作为数据传递给函数. 2. Lambda表达式的语法格式 基本语法格式如下: 基本语法下多个变体的说明: ...

  8. linux三剑客之sed命令

    一.前言 我们都知道,在Linux中一切皆文件,比如配置文件,日志文件,启动文件等等.如果我们相对这些文件进行一些编辑查询等操作时,我们可能会想到一些vi,vim,cat,more等命令.但是这些命令 ...

  9. 在web项目启动时,使用监听器来执行某个方法

    在web项目中有很多时候需要在项目启动时就执行一些方法,而且只需要执行一次,比如:加载解析自定义的配置文件.初始化数据库信息等等,在项目启动时就直接执行一些方法,可以减少很多繁琐的操作. 这里写了个简 ...

  10. linux系统管理--查看进程

    关于进程的查看,大家都不会陌生 ,主要是ps和pstree命令. ps  aux    查看系统中所有进程,使用BSD操作系统格式.(注意:不是ps -aux) 执行结果 USER :该进程是由哪个用 ...