js实现复制到剪切板

经常见到这么一个场景,就是点击一个按钮,实现复制链接到剪切板。

可能都会想到document.execCommand这个方法,以及document.createRange, window.getSelection 等。如

// html
<span class = "target"> https://github.com/liuhanqu/clipboard </span>

// js
var node = document.getElementById('target');
var range = document.createRange();
range.selectNode(node);
window.getSelection().addRange(range);

但是,上面的做法,对于一些浏览器的兼容性不是很好。 这时候,就可以利用input、textarea的原生方法select, 用几行代码轻松实现复制或者剪切功能

// html
<input class="target" value = "https://github.com/liuhanqu/clipboard" readonly>
<button id = "trigger">复制</button>

// js
var inp = document.getElementById('target');
var btn = document.getElementById('trigger');
btn.addEventListener('click', function(){
    inp.select();
    document.execCommand('copy);
})

最近撸了一个clipboard组件,但只是对于google比较友好,具体可以看这里,觉得不错的话,可以star一下哟
https://github.com/liuhanqu/clipboard

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端复制功能的若干 -- document.execCommand() 页面里copy的功能目前copy主流有四种...
    乖乖果效36阅读 26,047评论 1 1
  • 在业务中遇到需求需要复制内容,那么就需要访问操作系统的clipboard,但是其实浏览器对此做了限制,根本的原因在...
    老虎爱吃母鸡阅读 1,163评论 0 0
  • A:在 B: 嗯 A: 晚安 B: 嗯 一天,可能你忘了 所以,第二天 我 顶着黑黑的眼圈 你不知道的是 我,一直...
    王鴡阅读 155评论 0 0
  • 雾雨宁乡,古邑边城,换尽旧颜。昔纣王文武,商周恩怨,兴衰变更,逝水移川。酒肉池林,鹿台宴谢,一任荒淫枉负天。朝歌破...
    刘小地阅读 1,476评论 51 149
  • 今年4月16日在一个朋友孙子的百日宴上被一个云南支边老大哥说的吓住了,他说‘他才从二医院出院,他同病房的一个...
    高大庆阅读 301评论 1 2