史上最简单JS复制功能,兼容安卓ios!

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

相关文章