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; //解除引用

以上都是我的陋聞，若有問題有勞指正，你們共同窗習共同進步。若是有幫助到您，但願您能給動個小手點一下右下方的推薦，謝謝。