点击a标签实现复制链接url

<body>
        <input type="hidden" id="remark1" value="${remark1}">
        <input type="hidden" id="remark2" value="${remark2}">
        <hr>
        <table>
            <tr>
                <td id="remark"></td>
            </tr>
        </table>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
            $(function () {
                var remark1 = $("#remark1").val();
                var remark2 = $("#remark2").val();

                var linkArray = remark2.split(",");

                for (var i = 0; i < linkArray.length; i++) {
                    console.log(linkArray[i]);
                    remark1 = remark1.replace(linkArray[i],
                        "<a onclick='cp(\"" + linkArray[i] + "\")'>" +
                        "<font color='blue'>" + linkArray[i] +
                        "</font></a>")
                }

                $("#remark").html(remark1);
            });

            //复制到剪切板
            function cp(text) {
                //没有input框,自己造一个,用完销毁
                const input = document.createElement('input');
                document.body.appendChild(input);
                //存入数据
                input.setAttribute('value', text);
                input.select();
                document.execCommand("Copy");
                document.body.removeChild(input);
                alert("已复制该链接~")
            }
        </script>
    </body>

查过很多关于execCommand()的讲解,发现在execCommand()方法的定义中提到,它只能操作可编辑区域,也就是意味着除了 input、textarea 这样的输入域以外,是无法使用这个方法的

然而,在页面上直接写input和textarea标签,效果并不能达到我们的预期,所以我们在js中自己构造一个临时的input,用完就销毁,这样就不会对页面有过多的干涉了

copyright © Tmiracle all right reserved,powered by Gitbook该文件最后修改时间: 2019-11-27 22:59:40

results matching ""

    No results matching ""