史上最简单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页面没做专门响应式布局,只简单通过不设置宽度或宽度百分比....... 还是太懒了)