javascript函数仅适用于示例中的第一个输入框

我正在回显输入框中的$data行。下面的javascript函数在单击输入框时将输入值复制到剪贴板。问题是该函数仅适用于第一个输入框，而不适用于后续的回显输入框。我想我需要给每个输入框分配一个唯一的id，但我不知道该怎么做

// for each row it is echoing the following:

echo '<input id="copy-text" type="text" value="'.$data.'" size="50">';

<script>
document.getElementById("copy-text").onclick = function() {
  this.select();
  document.execCommand('copy');
}
</script>

//对于每一行，它都会回显以下内容：
回声'；
document.getElementById（“复制文本”）.onclick=function（）{
这是select（）；
document.execCommand（'copy'）；
}

ID应始终是唯一的。当您有多个具有相同值的id时，javascript会查找第一个与该id匹配的id，并跳过其余id

如果要循环遍历每一行，请使用如下索引

echo '<input id="copy-text_'.$i'" type="text" value="'.$data.'" size="50" onclick="copy($i)">';

<script>
     function copy(index) {
          var elem = document.getElementById("copy-text_" + index);
          elem.select();
          document.execCommand('copy');
     }
</script>

echo'；
功能副本（索引）{
var elem=document.getElementById（“复制文本”+索引）；
elem.select（）；
document.execCommand（'copy'）；
}

给元素一个类：

echo '<input class="copy-text" type="text" value="'.$data.'" size="50">';

---

呃。同一页上不能有重复的元素ID。（当然可以，但它不会真正起作用。）这最好写成

onclick=“copy（This）”

和

function copy（elem）{elem.select（）；…}

。不需要ID或ID查找。我更喜欢偶数侦听器方法，而不是单击

onclick

，但这可能不重要（可能更糟）。我同意你们的观点。但我只是想纠正他的错误，而不是大量修改代码。不过谢谢你指出这一点。

function handler() {
  this.select();
  document.execCommand('copy');
}

Array.from(document.querySelectorAll('.copy-text'))
  .forEach(function(element) {
    element.addEventListener(handler);
  });