如何修改脚本实现多个独立工作的剪贴板复制按钮？

原问题出在代码用了固定ID获取输入框，所有按钮都指向同一个元素。下面是修改后的代码，支持任意数量的复制按钮，每个按钮只复制对应输入框的内容：

修改后的完整代码 #

<!-- 第一个复制组 -->
<input type="text" value="要复制的内容1" class="copy-input">
<button class="copy-btn">复制文本</button>

<!-- 第二个复制组 -->
<input type="text" value="要复制的内容2" class="copy-input">
<button class="copy-btn">复制文本</button>

<script>
// 获取所有复制按钮
const copyButtons = document.querySelectorAll('.copy-btn');

// 给每个按钮绑定独立点击事件
copyButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 找到当前按钮对应的输入框（这里取按钮的前一个兄弟元素，适配示例结构）
    const input = this.previousElementSibling;
    
    // 选中输入框内容（兼容移动端）
    input.select();
    input.setSelectionRange(0, 99999);
    
    // 执行复制操作
    navigator.clipboard.writeText(input.value);
    
    // 可选：添加复制成功提示
    alert('已复制到剪贴板: ' + input.value);
  });
});
</script>

关键修改说明 #

• 移除原代码中固定的id，改用类名批量获取按钮，避免ID冲突
• 点击按钮时，通过this.previousElementSibling定位到对应输入框；如果你的HTML结构是按钮和输入框在同一个容器内，可替换为this.parentElement.querySelector('.copy-input')来适配
• 用forEach遍历所有按钮，为每个按钮绑定独立的点击事件，确保各自执行对应复制操作

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