将URL复制到剪贴板并显示和隐藏消息

Question

想将当前URL复制到剪贴板显示通知消息并在几秒钟后再次隐藏。 我在网上看过这个功能。

---

---

动画gif展示了它应该如何工作。 Javascript部分是从一个带有工作示例的网站中提取的，并且使用了相同的HTML和CSS代码，但是javascript的格式还没有正确，因为我只提取了这个函数需要的部分。 有人可以帮我正确地编写javascript吗？ 小提琴准备好了：

小提琴的例子

---

提取的javascript

  events: {
            "click .share": "onShareClick"
        },
        onMouseEnter: function() {},
        onShareClick: function(e) {
            var t = this;
            this.$el.find(".share").addClass("show-notice"), setTimeout(function() {
                t.$el.find(".share").removeClass("show-notice")
            }, 3e3);
            var n = document.createElement("textarea");
            n.value = location.href, document.body.appendChild(n), n.select(), document.execCommand("copy"), document.body.removeChild(n)
        },

HTML

<div class="share">
     <img src="images/share.svg">
     <span class="share-notice">Link copied to clipboard</span>
     <span class="mouseenter-notice">Share</span>
</div>

Answer 1

假设div是文档中“共享”类的第一个成员，您可以尝试：

 const div = document.getElementsByClassName('share')[0]; const shareNotice = document.getElementById('share-notice'); const mouseoverNotice = document.getElementById('mouseover-notice'); div.onclick = () => { window .navigator .clipboard .writeText(window.location.href); shareNotice.style.display = 'initial'; window.setTimeout(() => shareNotice.style.display = 'none', 1500); }; div.onmouseover = () => mouseoverNotice.style.display = 'initial'; div.onmouseleave = () => mouseoverNotice.style.display = 'none'; 

 .share { cursor: pointer } #share-notice { display: none; } #mouseover-notice { display: none; } 

 <div class="share"> x <span id="share-notice">Link copied to clipboard</span> <span id="mouseover-notice">Share</span> </div> 

Answer 2

看一下剪贴板API： https ： //developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

为方便起见，您可能需要使用剪贴板js： https ： //clipboardjs.com/

您可以使用window.location.href访问当前URL。