HTML实现复制当前链接到剪切板

你好呀，我是小邹。

今天跟大家分享一下HTML如何实现复制当前链接到剪切板。

效果图

代码实现

<a id="articleHref" th:href="@{/post/{url}(url=${article.articleUrl})}"></a>
<button type="button" id="copy" class="medium ui teal basic button">
    <i class="fa fa-paper-plane"></i>&emsp;分享给好友
</button>

<script th:inline="javascript">
    $("#copy").click(function () {
        var obj = document.getElementById("articleHref");
        var input = document.createElement("input");
        document.body.appendChild(input);
        input.value = obj.href;
        input.select();
        try {
            //进行复制到剪切板
            if (document.execCommand("Copy", true, null)) {
                //如果复制成功
                alert("复制链接成功！赶紧分享给你的好友吧~");
                //隐藏input框
                input.hidden = "hidden";
            } else {
                //如果复制失败
                alert("复制失败！");
            }
        } catch (err) {
            //如果报错
            alert("复制错误！")
        }
    })
</script>

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名，转载请标明出处。
最后编辑时间为: 2022/09/25 18:46:45