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

    原文作者:laohan
    原文地址: https://www.jianshu.com/p/ffe53a834400
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞