H5前端自动复制，JS自动绑定复制，JS复制到剪贴板。

H5前端js中自动复制功能：简单说下就是点击一个按钮触发事件，而后PC页面或者手机上的快捷粘贴都会被绑定复制值。

万变不离其中，我仍是喜欢用原生的方法document.execCommand('copy')。网上也有些第三方js封装了这个方法属性，可是浏览器会有兼容问题。

 

先从html开始吧，以下：

　　　　　　　　<label id="cSharingLinks" style="opacity:0;position: absolute;z-index:-999" >123</label>
　　　　　　　　<input type="button" value="复制" class="btnCopySharingLinks" />

第一个label标签用来存须要绑定复制的值。

注意：我以前用的input 的文本框，而后复制后粘贴出来会有2个换行，我是琢磨了半天去不掉，而后换label就收工了。

　　    这个标签不能用这些方法隐藏( jquery.hide()、display:none ) ，否则Copy失败。可是加了些样式给他变透明、漂移、置底 差很少也是个隐藏就好了。

第二个input按钮主要用来触发事件，随便你用啥，只要你能触发事件就行（我用标签的class经过juqery绑定了click方法）。

 

再是js代码，以下：

　　　　　　　　$("#cSharingLinks").html("须要复制的值");　　//为标签写入须要复制的值。注意：在Vue.Js中这步须要放在Created或者methods中，否则赋值顺序会有问题。
　　　　　　　　$(".btnCopySharingLinks").click(function () {

　　　　　　　　　　var copyDom= document.getElementById('cSharingLinks');　　//原生js根据Id获取到Dom对象。
　　　　　　　　　　var range = document.createRange();　　//建立一个range对象。
　　　　　　　　　　range.selectNode(copyDom);　　//选择整个节点，包括子节点。
　　　　　　　　　　window.getSelection().removeAllRanges();　　//移除选中内容。
　　　　　　　　　　window.getSelection().addRange(range);　　//添加选中内容。
　　　　　　　　　　 document.execCommand('copy');　　//执行自动复制。
　　　　　　　　　　window.getSelection().removeAllRanges();　　//删除全部选中内容。
　　　　　　　　});

最后，若是是一次性的能够经过 如下2个方法，解除对范围的引用，从而让垃圾回收机制回收其内存。可是一旦分离了就无法再使用了。

　　　　　　　　range.detach(); /从文档中分离
　　　　　　　　range = null; //解除引用

以上都是我的陋闻，若有问题有劳指正，你们共同窗习共同进步。若是有帮助到您，但愿您能给动个小手点一下右下方的推荐，谢谢。