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

【问题标题】：Copy URL to clipboard and show and hide message将 URL 复制到剪贴板并显示和隐藏消息
【发布时间】：2019-12-23 11:36:21
【问题描述】：

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

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

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>

【问题讨论】：

不，根本没有看到那些...感谢您的输入，但准确地制作了示例（gif动画）它应该做什么，为它制作了css和我认为可以正常工作的html ，但需要有关 javascript 的帮助。
这是一个有效的 plunkr：next.plnkr.co/edit/dZh5ebJOFkDITqaq?preview 请在 Safari 上测试一下
它绝对应该在本地服务器上工作，是的。确保确实加载了 CSS 和 JS。如果可以，请不要在 Safari 上开发。使用 Chrome 或 Firefox，直到一切正常，然后测试兼容性。
你把 CSS 和 JS 文件放在哪里了？他们叫什么？您确定您的 HTML 正确引用了它们吗？听起来您在为脚本指定正确的 src 和为样式表链接指定正确的 href 时遇到了麻烦。
对，或者您可以将自己的脚本移动到 <body> 的末尾，以便在所有 HTML 存在后运行。显然 plunkr 正在自动修复这个问题，所以我没有意识到它不会在其他地方工作。

标签： javascript html css url clipboard

【解决方案1】：

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

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>

【讨论】：

感谢您的帮助，但我不是 javascript wizzkid，需要更多信息来实现这一点。可能的工作示例？
你去。您也需要显示和隐藏消息的帮助吗？
我添加了消息显示/隐藏逻辑，以防万一
再次感谢您，但我不明白您给我的代码的实现...不复制 URL 并在复制到剪贴板时显示和隐藏通知消息并且不使用示例中现有的 css 和 html。哦，对不起，你已经改变了它......会看看
很抱歉，它似乎对您没有帮助。我会尝试解释......css最初隐藏了这两条消息。 JS部分选择要点击的div和两条消息；然后它为 div 上的 click-、mouseover- 和 mouseleave-events 附加侦听器；单击时，将 url 复制到剪贴板，并在 1.5 秒后再次显示和隐藏共享消息；在鼠标悬停时，另一个味精会在鼠标离开时再次显示和隐藏。

【解决方案2】：

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

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

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

【讨论】：

感谢看到clipboardjs，但有点卡住了我现在对javascript的实现以使其全部工作。