js实现一键复制

最近做一个小功能，需要实现一键复制，由于之前用过jq的ZeroClipboard，原理是通过flash来实现复制功能，因为现在各大浏览器都在‘打压’flash，默认都会把flash关闭掉，优先使用h5，所以就没再次试用了！

总结下当下的集中复制实现形式：

1、基于flash的jq的ZeroClipboard

优点：兼容性好，可易兼容ie（上古时代的破玩意）

缺点：(1)由于现代浏览器抛弃了flash，所以让基于flash的该方法也被限制的死死的，我要是用户，每次都让我手动开启flash！？are you kidding me！？    (2)体积大     (3)移动端不可用

2、h5的新api->execCommand('copy')

优点：简单、方便、不需要引入第三方库，对于复制要求度不高的需求很方便

缺点：兼容性不是特别好，ie9以下，ios不兼容

实现：

$('.copy').click(function (e) {

    e.stopPropagation();

/*待选中内容非输入框*/

    window.getSelection().removeAllRanges();//清除当前页面中的选中区域

    var range = document.createRange();//创建range对象

    range.selectNode(document.getElementById("copyNode"));//选择节点

    window.getSelection().addRange(range);//把range对像放入selection对象

/*待选中内容为输入框*/

$('#copyNode').select();

    var tag = document.execCommand('copy'); //一键复制

    if (tag) {

        window.getSelection().removeAllRanges();//复制完成后清除选中区域

        layer.msg('复制成功');

}

});

主要是使用range对象和selection对象以及document.execCommand('copy')方法来实现的！

我选用的这种所以贴上的代码🤓！

原理：先创建一个range对象，选中需要复制的节点，把range对象放入selection对象中（代替我们手动选中的操作）,然后利用execCommand方法放到粘贴板上，打完收工！

3、Clipboard.js 封装后execCommand('copy')

优点：体积小啊，功能全啊，兼容性也好啊，移动pc通吃哦(除ie低版本)

缺点：跟execCommand方法一样，毕竟核心方法不变

其他如ie的setData，这些用的少的就不介绍了！

第一次写文章，希望能给需要的人一点帮助！