JavaScript中使用nextElementSibling与e.target实现多表单输入字符计数器

核心问题原因 #

• 初始获取charsRemaining的逻辑错误：document.querySelectorAll(".image-title-upload")返回的是包含所有匹配输入框的NodeList集合，不是单个DOM元素，直接调用.nextElementSibling无法得到有效节点，该全局变量从定义开始就是无效值。
• 对e.target的理解有误：输入事件触发时，e.target本身就指向当前正在输入的输入框元素，不需要主动赋值，你写的e.target = item属于多余的错误操作。

修正方案 #

遍历每个输入框时，单独获取当前输入框对应的下一个兄弟节点（也就是计数器元素），每个输入事件仅操作当前输入框对应的计数器即可，修正后的JS代码如下：

const maxValue = 125;
// 获取所有输入框
const titleInputs = document.querySelectorAll(".image-title-upload");

titleInputs.forEach((inputItem) => {
  // 单独获取当前输入框对应的计数器节点
  const currentCounter = inputItem.nextElementSibling;
  // 绑定输入事件
  inputItem.addEventListener("input", (e) => {
    // 计算剩余字数
    const remaining = maxValue - e.target.value.length;
    // 写入当前对应的计数器
    currentCounter.textContent = remaining;
  });
});

补充优化方案 #

如果想避免后续DOM结构调整（比如在输入框和计数器中间新增其他元素）导致nextElementSibling拿错节点，可以改用父级定位的方式获取计数器，兼容性更强：

const currentCounter = inputItem.closest('form').querySelector('.characters-remaining');

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