如何使用 JS 同时复制到剪贴板和更改工具提示

Question

我想单击以将数字复制到剪贴板，并在单击时将工具提示文本从“复制到剪贴板”更改为“已复制：[数字]”。

号码很多，我不想用ID来减少我的代码。

我已经设法将数字复制到剪贴板，但我在工具提示方面遇到困难。

如有任何帮助或提示，我们将不胜感激。

const tds = document.querySelectorAll(".number");

tds.forEach(td => {
  td.onclick = function () {
    document.execCommand("copy");
  }

  td.addEventListener("copy", function (event) {
    event.preventDefault();
    if (event.clipboardData) {
      event.clipboardData.setData("text/plain", td.textContent);
      console.log(event.clipboardData.getData("text"));
      //the below 2 lines doesn't work
      var tooltip = document.getElementsByClassName("tooltiptext");
      tooltip.innerHTML = "copied" + event.clipboardData.getData("text");
    }
  });
})

function outFunc() {
  var tooltip = document.getElementsByClassName("tooltiptext");
  tooltip.innerHTML = "Copy to clipboard";
}

.tooltip {
  position        : relative;
  display         : inline-block;
  }
.tooltip .tooltiptext {
  visibility      : hidden;
  width           : 140px;
  background-color: #555;
  color           : #fff;
  text-align      : center;
  border-radius   : 6px;
  padding         : 5px;
  position        : absolute;
  z-index         : 1;
  bottom          : 150%;
  left            : 50%;
  margin-left     : -75px;
  opacity         : 0;
  transition      : opacity 0.3s;
  }
.tooltip .tooltiptext::after {
  content         : "";
  position        : absolute;
  top             : 100%;
  left            : 50%;
  margin-left     : -5px;
  border-width    : 5px;
  border-style    : solid;
  border-color    : #555 transparent transparent transparent;
  }
.tooltip:hover .tooltiptext {
  visibility      : visible;
  opacity         : 1;
  }

<div class="tooltip">
  <span class="tooltiptext">Copy to clipboard</span>
  <a style="font-size: 2em;" onmouseout="outFunc()" class="number">1</a>
</div>
<div class="tooltip">
  <span class="tooltiptext">Copy to clipboard</span>
  <a style="font-size: 2em;" onmouseout="outFunc()" class="number">2</a>
</div>
<div class="tooltip">
  <span class="tooltiptext">Copy to clipboard</span>
  <a style="font-size: 2em;" onmouseout="outFunc()" class="number">3</a>
</div>
<div class="tooltip">
  <span class="tooltiptext">Copy to clipboard</span>
  <a style="font-size: 2em;" onmouseout="outFunc()" class="number">4</a>
</div>

Answer 1

最大的问题是您没有为 document.getElementsByClassName 指定 []。 .

您注意到一个问题：如果您同时复制两个或更多号码，则不会正确显示复制信息，因为您将复制功能分配给每个人<span>

更新：我将 document.getElementsByClassName 更改为 document.querySelectorAll 以便使用 forEach，但如果您不想，只需使用 for 循环即可。

此外，由于您设置了 bottom: 150% 和 `opacity:0

，您的复制消息目前无法正常工作

你应该使用 mouseenter.

const tds = document.querySelectorAll(".number");


document.querySelectorAll(".tooltiptext").forEach(link =>{
link.addEventListener('mouseenter',function(){
link.textContent = 'Copy and paste'
})
})
tds.forEach(td => {
  td.onclick = function () {
    document.execCommand("copy");
  }

  td.addEventListener("copy", function (event) {
    event.preventDefault();
    if (event.clipboardData) {
      event.clipboardData.setData("text/plain", td.textContent);
      console.log(event.clipboardData.getData("text"));
      //the below 2 lines doesn't work
      var tooltip = document.querySelectorAll(".tooltiptext");
      tooltip.forEach(item =>{
        item.innerHTML = "copied" + event.clipboardData.getData("text");
      })
    }
  });
})

function outFunc() {
  var tooltip = document.querySelectorAll(".tooltiptext");
      tooltip.forEach(item =>{
        item.innerHTML = "Copy to clipboard";
      })
}

.tooltip {
  position        : relative;
  display         : inline-block;
  }
.tooltip .tooltiptext {
  
  width           : 140px;
  background-color: #555;
  color           : #fff;
  text-align      : center;
  border-radius   : 6px;
  padding         : 5px;
  position        : absolute;
  z-index         : 1;
  left            : 50%;
  margin-left     : -75px;
  transition      : opacity 0.3s;
  }
.tooltip .tooltiptext::after {
  content         : "";
  position        : absolute;
  top             : 100%;
  left            : 50%;
  margin-left     : -5px;
  border-width    : 5px;
  border-style    : solid;
  border-color    : #555 transparent transparent transparent;
  }
.tooltip:hover .tooltiptext {
  visibility      : visible;
  opacity         : 1;
  }

<div class="tooltip">
  <span class="tooltiptext">Copy to clipboard</span>
  <a style="font-size: 2em;" onmouseout="outFunc()" class="number">1</a>
</div>
<div class="tooltip">
  <span class="tooltiptext">Copy to clipboard</span>
  <a style="font-size: 2em;" onmouseout="outFunc()" class="number">2</a>
</div>
<div class="tooltip">
  <span class="tooltiptext">Copy to clipboard</span>
  <a style="font-size: 2em;" onmouseout="outFunc()" class="number">3</a>
</div>
<div class="tooltip">
  <span class="tooltiptext">Copy to clipboard</span>
  <a style="font-size: 2em;" onmouseout="outFunc()" class="number">4</a>
</div>

如何使用 JS 同时复制到剪贴板和更改工具提示

How to copy to clipboard and change tooltips at the same time with JS

javascript

tooltip