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

短命女 2022-12-15 12:43 129阅读 0赞

功能可以，样式有问题 [https://blog.csdn.net/qq\_30949371/article/details/107333644][https_blog.csdn.net_qq_30949371_article_details_107333644]

最终版 [https://www.cnblogs.com/xixinhua/p/10823449.html][https_www.cnblogs.com_xixinhua_p_10823449.html]

# [史上最简单JS复制功能,兼容安卓ios!][https_www.cnblogs.com_xixinhua_p_10823449.html] #

1.JS复制原理:

被复制内容的元素不能被其他元素遮盖,否则无效.  (设置opacity透明为0,不可以设置display:none);

2.常规的复制方法

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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="点击复制代码" />

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

这会带来两个问题: select()方法只能用于选中input \\ textarea元素中的内容  ;   这种复制方法在ISO中不兼容无法复制.

3.下面重点来了,说一种解决上述问题的方法:

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

<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);

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

看过很多安卓ios做兼容的方法,认为这一种最为简单的!

[https_blog.csdn.net_qq_30949371_article_details_107333644]: https://blog.csdn.net/qq_30949371/article/details/107333644
[https_www.cnblogs.com_xixinhua_p_10823449.html]: https://www.cnblogs.com/xixinhua/p/10823449.html
[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221123/908be674ac8f473bbdbd337eedd7ef61.png