在实现功能时写的一个小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. javascript中的==与===

    一.主要区别: 1.通俗的来说,==是值的比较,而===不仅仅比较值,还比较引用的是否是同一个对象. 2.用==来比较的时候,如果两个数的操作数的类型不一样,会先转换.而===的操作数则不会进行任何转 ...

  2. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  3. 调用startActivityForResult后,onActivityResult为什么立刻响应

    现象      今天在编写代码的时候,涉及到两个Activity通过Intent来传值的问题.具体描述为:activity A调用startActivityForResult()函数启动Activit ...

  4. django无法加载admin的静态内容的问题(Centos7+Nginx+uwsgi环境下)

    Nginx静态资源无法加载,导致admin没有CSS样式: 这个问题,主要是要理解: 1.Django不会去解析静态内容(css,js,img)等,而是交给Nginx去处理,所以nginx.conf要 ...

  5. Thinkphp3.2学习——架构_URL模式

    入口文件是应用的单一入口,对应用的所有请求都定向到应用入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作: http://serverName/index.php/模块/控制器/操作 这是 ...

  6. struts2总体介绍

    这篇博客开始将总结一下有关框架的知识,在开发中合适的利用框架会使我们的开发效率大大提高.当今比较流行的开源框架: 关注数据流程的MVC框架 (Struts1/2, WebWork, Spring MV ...

  7. js:不是空字符串的空字符串引起的bug

    今天在用js的时候,使用了两段完全相同的代码,可是一个报错,一个好好的 代码如下: <script type="text/javascript">    console ...

  8. winform无边框窗口拖动

    无边框的窗口想拖动,只需要在置顶的容器上添加对应的mousedown 和 mousemove 事件就可以实现了.代码如下: //拖动窗口 private Point mPoint = new Poin ...

  9. 18个你可能不相信是用CSS制作出来的东西

    与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和交互的能力,CSS集合HTML以及JavaScrip ...

  10. 关于bootstrap table 的可编辑列表的实例

    最近被安排到一个新的项目里,首先被分配了一个成果管理的模块,虽然是简单的增删改查,但是也费了不少功夫. 其中耽误最长的时间就是form中嵌套了两个可编辑列表的子表.废话不说上干货 = = 参考资料 1 ...