js实现一键复制

2017-12-26  本文已影响0人  conankids

最近做一个小功能,需要实现一键复制,由于之前用过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,这些用的少的就不介绍了!

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

上一篇下一篇

猜你喜欢

热点阅读