史上最簡單JS復制功能,兼容安卓ios!

1.JS復制原理:

　　被復制內容的元素不能被其他元素遮蓋,否則無效.  (設置opacity透明為0,不可以設置display:none);

2.常規的復制方法

function copyUrl2()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 選擇需要復制內容的對象
document.execCommand("Copy"); // 執行瀏覽器復制命令
alert("已復制好，可貼粘。");
}
</script>
<textarea cols="20" rows="10" id="biao1">用戶定義的代碼區域</textarea>
<input type="button" onClick="copyUrl2()" value="點擊復制代碼" />

這會帶來兩個問題: select()方法只能用於選中input \ textarea元素中的內容  ;   這種復制方法在ISO中不兼容無法復制.

3.下面重點來了,說一種解決上述問題的方法:

 <div class="top">
            <div class="copytxt" style="opacity:0;">13162087765</div>
            <div class="txt">
                <div class="box">請添加微信13162087765</div>
                <button class="btn">復制微信號</button>
            </div>
 </div>
function copyArticle(event) {
        const range = document.createRange();
        range.selectNode(document.querySelector(".copytxt"));

        const selection = window.getSelection();
        if(selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('Copy');
        alert("復制成功！");
    }
    document.querySelector(".btn").addEventListener('click', copyArticle, false);

看過很多安卓ios做兼容的方法,認為這一種最為簡單的! 

(記錄下和本文無關的問題: 父元素不設置寬度時,ios中子元素浮動有間距, 設置margin-left: -3px;這種主要工作時,做移動端H5頁面沒做專門響應式布局,只簡單通過不設置寬度或寬度百分比....... 還是太懶了)