Rails应用JS实现的复制到剪贴板功能仅首个实例生效如何解决

问题根源 #

列表循环生成多个DOM节点时，重复使用了myInput和btn两个ID。DOM规范要求ID全局唯一，document.getElementById只会匹配到页面中第一个对应ID的元素，因此只有第一个按钮绑定了点击事件、关联了正确的输入框值。

第一步：修改ERB模板代码 #

移除重复的ID，替换为通用类名：

<div class="input-group float-end">
    <input type="text" class="form-control bg-dark text-white copy-target-input" value="<%= text.tocopy %>">
    <button class="btn btn-outline-light copy-btn">
        <i class="far fa-copy"></i>
    </button>
</div>

第二步：修改JS逻辑 #

改用事件委托绑定点击事件，点击按钮时自动查找同容器下的输入框取值，所有动态生成的列表项也能自动适配：

<script>
  // 原有复制逻辑可直接保留，兼容性良好
  function copyText(text){
    function selectElementText(element) {
      if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
      } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(element);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
      }
    }
    var element = document.createElement('DIV');
    element.textContent = text;
    document.body.appendChild(element);
    selectElementText(element);
    document.execCommand('copy');
    element.remove();
  }

  // 绑定全局点击监听，也可绑定到列表的父容器进一步提升性能
  document.addEventListener('click', function(e) {
    // 兼容点击按钮内的图标的场景
    const copyBtn = e.target.closest('.copy-btn');
    if (copyBtn) {
      // 查找当前按钮同容器下的目标输入框
      const targetInput = copyBtn.closest('.input-group').querySelector('.copy-target-input');
      copyText(targetInput.value);
      // 可自行扩展此处添加复制成功的交互提示，比如按钮闪一下、显示"已复制"文本等
    }
  })
</script>

可选优化：更现代的复制实现 #

如果你的站点是HTTPS环境（本地localhost调试也支持），可以替换原有copyText函数为原生Clipboard API实现，代码更简洁：

function copyText(text) {
  navigator.clipboard.writeText(text).catch(err => {
    console.error('复制失败：', err);
  });
}

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