多输入框值存储：如何替换数组中同一输入框的历史值

你的问题核心是需要关联输入框与存储的数值，避免同一输入框多次输入时在数组中生成重复条目。先看看你原有代码的两个关键问题：

1. document.querySelector('input') 只会选中页面上第一个<input>元素，其他输入框不会触发blur事件；
2. 每次触发blur就直接push新值，完全没有判断是否是同一输入框的更新操作，导致数组会积累大量重复的、无关的数值。

解决方案：绑定所有输入框 + 用唯一标识关联存储条目 #

我们可以给每个输入框绑定事件，同时让存储的数组元素包含输入框的唯一标识（比如id），这样就能精准找到对应条目进行替换。

完整代码示例

// 调整数据结构，让每个数组项存储输入框的id和对应值
let data = { inputData: [] };

// 选中所有class为type的输入框，给每个绑定blur事件
document.querySelectorAll('input.type').forEach(inputElement => {
  inputElement.addEventListener('blur', updateItem);
});

function updateItem() {
  const currentInputId = this.id;
  const currentInputValue = this.value;

  // 在数组中查找当前输入框对应的条目索引
  const targetIndex = data.inputData.findIndex(item => item.id === currentInputId);

  if (targetIndex !== -1) {
    // 找到已有条目，替换它的值
    data.inputData[targetIndex].value = currentInputValue;
  } else {
    // 没有找到，新增一个包含id和值的条目
    data.inputData.push({ id: currentInputId, value: currentInputValue });
  }

  // 可选：打印当前数据状态，验证效果
  console.log('当前存储的数据：', data);
}

代码解释 #

• 绑定所有输入框：用document.querySelectorAll('input.type')选中所有目标输入框，通过forEach给每个输入框绑定blur事件，确保所有输入框都能触发更新逻辑。
• 关联输入框与存储值：数组中的每个元素是一个对象，包含id（输入框的唯一标识）和value（输入值），这样能准确对应每个输入框的数值，不会混淆。
• 判断并更新/新增：用findIndex快速定位数组中是否已有当前输入框的条目：
  • 如果找到（targetIndex !== -1），就替换该条目的value；
  • 如果没找到，就新增一个条目存入数组。

额外优化建议 #

如果你的输入框不需要保留历史记录，只是想实时同步每个输入框的最新值，也可以把data改成一个直接以输入框id为键的对象，这样更直观：

let data = { inputData: {} };

function updateItem() {
  // 直接以id为键存储值，自动覆盖旧值
  data.inputData[this.id] = this.value;
  console.log('当前存储的数据：', data);
}

这种方式更简洁，适合只需要实时存储每个输入框最新值的场景。

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