在实现功能时写的一个小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. 谈谈一些有趣的CSS题目(十五)-- 奇妙的 background-clip: text

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. Java面试小试题

    面试是我们每个人都要经历的事情,大部分人且不止一次,这里给大家总结最新的2016年面试题,让大家在2017年找工作时候能够事半功倍. 1 Switch能否用string做参数? a.在 Java 7 ...

  3. dp

    1. 将原问题分解为子问题 2. 确定状态 3. 确定一些初始状态(边界状态)的值 4. 确定状态转移方程 1) 问题具有最优子结构性质.如果问题的最优解所包含的子问题的解也是最优的,我们就称该问题具 ...

  4. hadoop集群的节点启动问题

    start-all.sh 启动集群时,NameNode或DataNode节点启动不了,但之前可以启动. 查看hadoop中hdfs-site.xml配置文件 <property> < ...

  5. hdu1420 Prepared for New Acmer 简单数学

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1420 简单数学题 第一次wa在可能和会出现取模后值为负数的情况. 只要会一个数论上的简单公式(a*b) ...

  6. ShadowBroker释放的NSA工具中Esteemaudit漏洞复现过程

    没有时间测试呢,朋友们都成功复现,放上网盘地址:https://github.com/x0rz/EQGRP 近日臭名昭著的方程式组织工具包再次被公开,TheShadowBrokers在steemit. ...

  7. 文本主题模型之LDA(一) LDA基础

    文本主题模型之LDA(一) LDA基础 文本主题模型之LDA(二) LDA求解之Gibbs采样算法 文本主题模型之LDA(三) LDA求解之变分推断EM算法(TODO) 在前面我们讲到了基于矩阵分解的 ...

  8. java面向对象--包及访问控制符

    多人开发同一个项目时,会出现类名称相同的情况.package就是为了避免类或接口名称重复而采用的一种措施.实际上包就是有一定层次结构的文件夹,*.class文件要保存当前类声明的和包对应的文件夹中. ...

  9. swift pod第三方OC库使用use_frameworks!导致#import提示无法找到头文件

    以MBProgressHUD为例子 swift中Podfile文件一般都会加上use_frameworks! 这样就可以直接通过import MBProgressHUD来访问MBProgressHUD ...

  10. Calendar使用

    1简单例子 package com.kungeek.tip; import java.text.SimpleDateFormat; import java.util.Calendar; import ...