javascript - 两个复制文本按钮？

Question

我发现了如何使用 now 行的复制文本按钮，但尝试修改脚本以使用多个按钮和多个文本框。首先，我能看到的唯一方法是复制脚本、更改变量，这样代码太多了。其次，我写的只是复制了最后一个实例

function myFunction() {
      var copyText = document.getElementById("myInput");
      copyText.select();
      document.execCommand("copy");
        var copyText = document.getElementById("myInput2");
      copyText.select();
      document.execCommand("copy");
      
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copied: " + copyText.value;
        var tooltip = document.getElementById("myTooltip2");
      tooltip.innerHTML = "Copied: " + copyText.value;
    }
    
    function outFunc() {
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copy to clipboard";
        var tooltip = document.getElementById("myTooltip2");
      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;
    }

    <input type="text" value="Hello World" id="myInput">
    
    <div class="tooltip">
    <button onclick="myFunction()" onmouseout="outFunc()">
      <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
      Copy text
      </button>
    </div>
    <p>
    <input type="text" value="Hello World 2" id="myInput2">
    
    <div class="tooltip">
    <button onclick="myFunction()" onmouseout="outFunc()">
      <span class="tooltiptext" id="myTooltip2">Copy to clipboard</span>
      Copy text
      </button>
    </div>

没有任何错误，但是上面的脚本只复制了两个按钮的第二个实例

Answer 1

这部分是问题:

var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
var copyText = document.getElementById("myInput2");
copyText.select();
document.execCommand("copy");

您正在将两个输入元素中的文本复制到剪贴板。相反，您可以在两个按钮上使用一个属性来指向应从中复制文本的输入元素。

例如，

<button onclick="myFunction(this)" data-target="myInput" onmouseout="outFunc()">

这里，myFunction(this)在事件处理函数中携带了对被点击按钮的引用，data-target="myInput"指向文本元素应复制文本。

现在“myFunction”函数只需要使用这些信息将所需的文本放入剪贴板。这是工作演示:

function myFunction(elem) {
  var targetElementID = elem.getAttribute("data-target");
  var copyText = document.getElementById(targetElementID);
  copyText.select();
  document.execCommand("copy");
   

  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied: " + copyText.value;
    var tooltip = document.getElementById("myTooltip2");
  tooltip.innerHTML = "Copied: " + copyText.value;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy to clipboard";
    var tooltip = document.getElementById("myTooltip2");
  tooltip.innerHTML = "Copy to clipboard";
}

<input type="text" value="Hello World" id="myInput">

<div class="tooltip">
<button onclick="myFunction(this)" data-target="myInput" onmouseout="outFunc()">
  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
  Copy text
  </button>
</div>
<p>
<input type="text" value="Hello World 2" id="myInput2">

<div class="tooltip">
<button onclick="myFunction(this)" data-target="myInput2" onmouseout="outFunc()">
  <span class="tooltiptext" id="myTooltip2">Copy to clipboard</span>
  Copy text
  </button>
</div>