监听输入框数组的值变化并更新数组-html教程-PHP中文网

监听输入框数组的值变化并更新数组

DDD

发布： 2025-10-13 12:43:30

原创

295人浏览过

监听输入框数组的值变化并更新数组

本文旨在提供一个清晰、简洁的JavaScript解决方案，用于监听一组输入框（input）的值变化，并将这些值动态地更新到一个由对象组成的数组中。我们将详细介绍如何使用事件监听器和数组操作来实现这一功能，并提供完整的代码示例和解释，帮助读者理解和应用该技术。

在Web开发中，经常需要实时监听用户在输入框中的输入，并根据输入内容动态更新数据。当存在一组输入框，并且需要将它们的值存储到一个数组中，并在任何一个输入框的值发生变化时更新该数组时，就需要一种高效且易于维护的解决方案。本文将详细介绍如何使用JavaScript实现这一功能。

监听输入框数组的值变化

首先，我们需要获取到所有的输入框元素。假设这些输入框具有相同的name属性，例如updates[]。我们可以使用document.forms和document.getElementsByName来获取这些元素，并将其转换为一个数组。

// 获取包含输入框的 form 元素
const form = document.forms[0];

// 获取所有 name 为 "updates[]" 的输入框元素，并转换为数组
const fc = Array.from(form.elements["updates[]"]);

console.log(fc);

登录后复制

这段代码首先通过document.forms[0]获取页面中的第一个form元素。然后，使用form.elements["updates[]"]获取所有name属性为updates[]的元素集合。最后，使用Array.from()将这个集合转换为一个数组fc，方便后续操作。

创建初始数据数组

接下来，我们需要创建一个数组，用于存储每个输入框的初始值。这个数组将由包含input_value键的对象组成。

// 获取输入框的初始值，并创建一个包含 input_value 键的对象数组
const values = fc.map(input => Object.assign({}, {'input_value': input.value}));

console.log(values);

登录后复制

这里使用了map方法遍历输入框数组fc，对于每个输入框，创建一个包含input_value键的对象，并将输入框的当前值作为该键的值。Object.assign({}, {'input_value': input.value})用于创建一个新的对象，避免直接修改原始输入框对象。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

绑定事件监听器

现在，我们需要为每个输入框绑定input事件监听器，以便在输入框的值发生变化时，能够及时更新数据数组。

// 为每个输入框绑定 input 事件监听器，当输入框的值发生变化时，触发 update 函数
fc.forEach(input => input.oninput = update);

登录后复制

这段代码使用forEach方法遍历输入框数组fc，为每个输入框绑定input事件监听器。当输入框的值发生变化时，update函数将被触发。

实现更新函数

update函数是核心部分，它负责获取发生变化的输入框的索引，并更新数据数组中对应的值。

// 定义 update 函数，用于更新数据数组
function update(e) {
  // 获取当前发生变化的输入框的索引
  let index = fc.indexOf(this);

  // 更新数据数组中对应索引的值
  values.forEach((obj, idx) => {
    if (idx === index) {
      obj["input_value"] = this.value;
    }
  });

  // 打印更新后的数据数组
  console.log(values);
}

登录后复制

在update函数中，首先使用fc.indexOf(this)获取当前发生变化的输入框在数组fc中的索引。然后，使用forEach方法遍历数据数组values，当索引匹配时，更新对应对象的input_value键的值。最后，打印更新后的数据数组，以便观察变化。

完整代码示例

<form>
  <div class="scd-item__qty">
    <input class="scd-item__qty_input" name="updates[]" value="5" />
  </div>
  <div class="scd-item__qty">
    <input class="scd-item__qty_input" name="updates[]" value="4" />
  </div>
  <div class="scd-item__qty">
    <input class="scd-item__qty_input" name="updates[]" value="3" />
  </div>
  <script>
    // 获取包含输入框的 form 元素
    const form = document.forms[0];

    // 获取所有 name 为 "updates[]" 的输入框元素，并转换为数组
    const fc = Array.from(form.elements["updates[]"]);

    // 获取输入框的初始值，并创建一个包含 input_value 键的对象数组
    const values = fc.map(input => Object.assign({}, {'input_value': input.value}));

    // 为每个输入框绑定 input 事件监听器，当输入框的值发生变化时，触发 update 函数
    fc.forEach(input => input.oninput = update);

    // 定义 update 函数，用于更新数据数组
    function update(e) {
      // 获取当前发生变化的输入框的索引
      let index = fc.indexOf(this);

      // 更新数据数组中对应索引的值
      values.forEach((obj, idx) => {
        if (idx === index) {
          obj["input_value"] = this.value;
        }
      });

      // 打印更新后的数据数组
      console.log(values);
    }
  </script>
</form>

登录后复制

注意事项

确保所有的输入框具有相同的name属性，以便能够方便地获取它们。
input事件在每次输入框的值发生变化时都会触发，因此可能会对性能产生影响。如果需要更精细的控制，可以考虑使用change事件，该事件只在输入框失去焦点时触发。
代码中的document.forms[0]假设页面中只有一个form元素。如果页面中有多个form元素，需要根据实际情况修改代码。