Question

我在输入框内回显$ 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>

Answer 1

ID应始终是唯一的。如果您有多个具有相同值的ID，则javascript会查找与该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>

Answer 2

为元素添加一个类：

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

并且有一个脚本标记可以找到所有这些元素并将事件处理程序绑定到它们：

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

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

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

2 个答案: