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

Question

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

---

---

动画 gif 显示了它应该如何工作。 Javascript 部分是从一个带有工作示例的网站中提取的，使用了相同的 HTML 和 CSS 代码，但是 javascript 的格式还不正确，因为我只提取了这个功能需要的部分。有人可以帮我正确编写 javascript 吗？ fiddle 已准备就绪:

Fiddle example

---

提取的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>