如何基于指定数值生成连续数字并填充至循环生成的输入框

API 探路者

2026-8-10

批量输入框连续数值自动填充方案

需求概述

从id为from_number的输入框获取起始数值（示例值10）
通过PHP循环生成50个name="list"的输入框
当from_number输入框失去焦点时，用JavaScript将起始值开始的连续递增数字依次填充到这些输入框中，示例期望填充值从10到50依次排列

现有代码

起始值输入框（HTML）

<label>
    <input type="text" class="form-control"
           id="from_number" placeholder="from_number"
           autocomplete="off">
</label>

PHP批量生成输入框代码

<?php
// 循环生成50个name为list的输入框
for ($i = 0; $i < 50; $i++) {
?>
<label>
    <input type="text" class="form-control" name="list"
           placeholder="list" autocomplete="off">
</label>
<?php
}
?>

当前JavaScript代码（存在逻辑错误）

$('#from_number').blur(function () {
    let begin = document.getElementById('from_number').value;
    let arr = [];
    let inputs = document.querySelectorAll('[name^="list"]');
    for (let i = 0; i < inputs.length; i++) {
        inputs[i].value = arr.push(begin++) + begin -1;
    }
});

问题分析

当前JavaScript代码存在两处关键问题：

未将获取的起始值转为整数，若输入为字符串类型会导致递增逻辑出错
引入无意义的数组arr，且数值计算逻辑错误，无法生成连续递增序列

修正后的JavaScript代码

$('#from_number').blur(function () {
    // 将输入值转为整数，确保数值运算正确
    let begin = parseInt(document.getElementById('from_number').value);
    // 精准匹配所有name为list的输入框
    let inputs = document.querySelectorAll('[name="list"]');
    
    // 循环填充每个输入框
    for (let i = 0; i < inputs.length; i++) {
        // 起始值 + 索引 = 当前输入框的目标值
        inputs[i].value = begin + i;
    }
});