Tmiracle

点击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,用完就销毁,这样就不会对页面有过多的干涉了