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

召田最帅boy

已于 2022-09-25 18:47:40 修改

阅读量2.4k

点赞数 2

分类专栏：前端文章标签： html javascript 前端

于 2022-09-23 18:26:03 首次发布

本文链接：https://blog.csdn.net/Zou_05/article/details/127016100

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

你好呀，我是小邹。

今天跟大家分享一下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>