实现EventListener绑定多元素并判断触发元素的父容器

原代码的核心问题很明显：

• 重复使用id="input"和id="measure"，但ID在页面中必须唯一，导致只能选中第一个元素
• 函数硬编码获取全局的measure元素，无法对应每个独立的input容器

下面是修改后的实现方案，同时兼顾未来自定义元素的使用场景：

第一步：修正HTML结构 #

把重复的ID换成类名，让每个input和对应的measure配对在同一个容器里：

<div class="input">
  ...
  <div class="input_box">
    <input type="text" placeholder="Value" class="dynamic-width-input" />
    <span class="measure"></span>
  </div>
  ...
</div>

<div class="input">
  ...
  <div class="input_box">
    <input type="text" placeholder="Value" class="dynamic-width-input" />
    <span class="measure"></span>
  </div>
  ...
</div>

第二步：重写JavaScript逻辑 #

修改函数，让它能处理多个元素，并且自动找到每个input对应的measure：

// 批量初始化所有动态宽度input
document.querySelectorAll('.dynamic-width-input').forEach(input => {
  initInputWidth(input);
  input.addEventListener('input', updateInputWidth);
});

// 初始化宽度（对应原代码的主动调用逻辑）
function initInputWidth(input) {
  const measureElm = input.parentElement.querySelector('.measure');
  measureElm.textContent = input.getAttribute('placeholder');
  input.style.width = `${measureElm.offsetWidth}px`;
}

// 输入时实时更新宽度
function updateInputWidth() {
  const measureElm = this.parentElement.querySelector('.measure');
  const displayText = this.value || this.getAttribute('placeholder');
  measureElm.textContent = displayText;
  this.style.width = `${measureElm.offsetWidth}px`;
}

针对未来自定义元素的兼容处理 #

如果以后要改成自定义元素（比如<dynamic-width-input>），只需要调整选择器和初始化时机：

customElements.define('dynamic-width-input', class extends HTMLElement {
  connectedCallback() {
    const input = this.querySelector('input');
    // 绑定初始化和事件
    initInputWidth(input);
    input.addEventListener('input', updateInputWidth);
  }
});

这样每个自定义元素实例会在挂载时自动初始化自己的input宽度逻辑，完全隔离各个实例的状态。

关键改动说明 #

• 用querySelectorAll替代getElementById，批量选择所有目标input
• 每个input通过parentElement找到自己容器内的measure元素，避免全局冲突
• 拆分初始化和更新逻辑，让代码更清晰，也方便自定义元素复用
• 去除冗余的条件判断，简化宽度计算逻辑

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