循环生成的输入框点击复制按钮失效问题求助

问题根源 #

HTML规范中ID必须是唯一的，你循环生成的多个<input>都使用了myInput这个ID，导致document.getElementById("myInput")始终只会返回页面中第一个匹配该ID的元素。因此点击后面的按钮时，复制的永远是第一个input的值，而非对应按钮旁边的input内容。

当只有一组input和按钮时，ID唯一，getElementById能正确定位到目标元素，所以功能正常。

解决方案 #

方案一：直接传递目标元素（简单适配现有代码） #

修改按钮的onclick事件，将对应input元素作为参数传入函数：

修改后的HTML

<input type="text" value="Hello World">
<button onclick="myFunction(this.previousElementSibling)">Copy text</button>

<input type="text" value="Hello World fdasfds">
<button onclick="myFunction(this.previousElementSibling)">Copy text</button>

<input type="text" value="Hello World fdasfd fsdafds">
<button onclick="myFunction(this.previousElementSibling)">Copy text</button>

修改后的JS

function myFunction(copyText) {
  // 选中输入框内容
  copyText.select();
  copyText.setSelectionRange(0, 99999); // 适配移动端选中文本

  // 复制到剪贴板
  navigator.clipboard.writeText(copyText.value);

  // 提示复制结果
  alert("Copied the text: " + copyText.value);
}

方案二：使用类名+事件委托（推荐动态生成场景） #

如果是循环动态生成的元素，更推荐用事件委托或批量绑定事件，避免重复写onclick：

优化后的HTML

<div class="copy-pair">
  <input type="text" value="Hello World" class="copy-input">
  <button class="copy-btn">Copy text</button>
</div>

<div class="copy-pair">
  <input type="text" value="Hello World fdasfds" class="copy-input">
  <button class="copy-btn">Copy text</button>
</div>

<div class="copy-pair">
  <input type="text" value="Hello World fdasfd fsdafds" class="copy-input">
  <button class="copy-btn">Copy text</button>
</div>

批量绑定事件代码

// 给所有复制按钮绑定点击事件
document.querySelectorAll('.copy-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const targetInput = this.closest('.copy-pair').querySelector('.copy-input');
    targetInput.select();
    targetInput.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(targetInput.value);
    alert("Copied the text: " + targetInput.value);
  });
});

事件委托（适合后续动态新增元素）

如果后续会通过JS动态添加更多input和按钮，用事件委托更高效：

document.body.addEventListener('click', function(e) {
  if (e.target.classList.contains('copy-btn')) {
    const targetInput = e.target.closest('.copy-pair').querySelector('.copy-input');
    targetInput.select();
    targetInput.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(targetInput.value);
    alert("Copied the text: " + targetInput.value);
  }
});

内容的提问来源于stack exchange，提问作者jhunlio