本文旨在提供一个清晰、简洁的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})用于创建一个新的对象，避免直接修改原始输入框对象。
绑定事件监听器
现在，我们需要为每个输入框绑定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元素，需要根据实际情况修改代码。
总结
本文详细介绍了如何使用JavaScript监听一组输入框的值变化，并将这些值动态地更新到一个由对象组成的数组中。通过使用事件监听器和数组操作，可以实现实时数据更新，并为Web应用程序提供更强的交互性。希望本文能够帮助读者理解和应用该技术，并在实际开发中发挥作用。
