如何精简多文本框复制功能的重复JavaScript代码？

核心优化方向 #

• 给按钮和文本框使用统一类名，抛弃带序号的零散类（如btn0/text0）
• 复用同一个点击处理函数，通过DOM关联或自定义属性匹配对应文本框
• 可选使用事件委托，进一步减少事件绑定次数

方案1：利用DOM结构关联（适合固定结构） #

先修改HTML，统一类名：

<textarea class="box copy-textarea" id="text0">Text 1</textarea>
<button class="copy-btn" style="vertical-align:top;">Copy</button>

<textarea class="box copy-textarea" id="text1">Text 2</textarea>
<button class="copy-btn" style="vertical-align:top;">Copy</button>

<textarea class="box copy-textarea" id="text2">Text 3</textarea>
<button class="copy-btn" style="vertical-align:top;">Copy</button>

再编写精简后的JS：

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

// 通用复制处理函数
function handleCopy(event) {
  // 从按钮的前一个兄弟元素找到对应的textarea
  const targetTextarea = event.target.previousElementSibling;
  if (!targetTextarea) return;

  targetTextarea.focus();
  targetTextarea.select();

  try {
    document.execCommand('copy');
    // 可选：添加复制成功提示，比如 alert('复制成功')
  } catch (err) {
    console.error('复制失败:', err);
  }
}

// 批量绑定事件
copyBtns.forEach(btn => btn.addEventListener('click', handleCopy));

方案2：自定义属性绑定（更灵活，不受DOM结构影响） #

如果后续DOM结构可能调整，用自定义属性关联文本框ID更可靠：
修改HTML：

<textarea class="box copy-textarea" id="text0">Text 1</textarea>
<button class="copy-btn" data-target="#text0" style="vertical-align:top;">Copy</button>

<textarea class="box copy-textarea" id="text1">Text 2</textarea>
<button class="copy-btn" data-target="#text1" style="vertical-align:top;">Copy</button>

<textarea class="box copy-textarea" id="text2">Text 3</textarea>
<button class="copy-btn" data-target="#text2" style="vertical-align:top;">Copy</button>

对应的JS：

const copyBtns = document.querySelectorAll('.copy-btn');

function handleCopy(event) {
  // 从自定义属性获取目标textarea的选择器
  const targetSelector = event.target.dataset.target;
  const targetTextarea = document.querySelector(targetSelector);
  if (!targetTextarea) return;

  targetTextarea.focus();
  targetTextarea.select();

  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

copyBtns.forEach(btn => btn.addEventListener('click', handleCopy));

方案3：事件委托（性能最优，适合大量元素） #

如果需要添加更多复制按钮，用事件委托只绑定一次事件更高效：
先给所有元素加个容器：

<div class="copy-group">
  <textarea class="box copy-textarea" id="text0">Text 1</textarea>
  <button class="copy-btn" style="vertical-align:top;">Copy</button>

  <textarea class="box copy-textarea" id="text1">Text 2</textarea>
  <button class="copy-btn" style="vertical-align:top;">Copy</button>

  <textarea class="box copy-textarea" id="text2">Text 3</textarea>
  <button class="copy-btn" style="vertical-align:top;">Copy</button>
</div>

JS代码：

const copyGroup = document.querySelector('.copy-group');

// 只给容器绑定一次点击事件
copyGroup.addEventListener('click', function(event) {
  // 判断点击的是复制按钮
  if (!event.target.classList.contains('copy-btn')) return;

  const targetTextarea = event.target.previousElementSibling;
  if (!targetTextarea) return;

  targetTextarea.focus();
  targetTextarea.select();

  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('复制失败:', err);
  }
});

优化后的优势 #

• 新增文本框和按钮时，无需修改JS代码，直接复用类名即可
• 代码冗余度大幅降低，后续维护更方便
• 事件委托方式减少了事件绑定数量，页面性能更优

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