jQuery动态增删输入框问题：删除后新增异常、自动聚焦失效及输入值变化自动跳转需求实现

嘿，我来帮你搞定这个动态输入框的问题！你遇到的删除后新增异常、自动聚焦失效，还有输入值变化后自动跳转到下一个框的需求，咱们先拆解原代码里的核心问题，再给出彻底修复的实现方案。

原代码的几个关键问题 #

• 重复绑定事件：每次新增输入框都调用init_input_focus()，会给已有的输入框重复绑定change事件，导致后续触发多次逻辑，出现各种异常。
• 索引维护混乱：input_inx的增减逻辑太粗糙，删除行后直接减1，根本没法正确对应当前输入框的实际位置，聚焦自然就乱了。
• 重复ID问题：新增的行都用id="1"，这违反HTML规范（ID必须唯一），会导致潜在的DOM操作冲突。
• 内联事件不友好：onclick、onfocus这类内联事件不仅不利于代码维护，还容易和jQuery的事件绑定逻辑冲突。

修复后的完整实现 #

先补个基础的HTML结构（你可以根据自己的页面调整）：

<div class="mb-2">
  当前总行数：<b id="total_row">1</b>
</div>
<div id="input_body">
  <!-- 初始默认行 -->
  <div class="row mt-1">
    <div class="col-md-2">
      <input type="text" name="col0[]" placeholder="列0" />
    </div>
    <div class="col-md-3">
      <input type="text" name="col1[]" placeholder="列1" />
    </div>
    <div class="col-md-1">
      <button class="remove-btn btn btn-sm btn-danger">Remove</button>
    </div>
  </div>
</div>

然后是核心的jQuery代码：

$(document).ready(function() {
  // 1. 当col1输入框内容变化时，自动新增一行
  $('#input_body').on('change', 'input[name="col1[]"]', function() {
    // 构建新行的HTML
    const newRowHtml = `
      <div class="row mt-1">
        <div class="col-md-2">
          <input type="text" name="col0[]" placeholder="列0" />
        </div>
        <div class="col-md-3">
          <input type="text" name="col1[]" placeholder="列1" />
        </div>
        <div class="col-md-1">
          <button class="remove-btn btn btn-sm btn-danger">Remove</button>
        </div>
      </div>
    `;
    // 追加新行到容器
    const $newRow = $(newRowHtml).appendTo('#input_body');
    // 更新总行数显示
    $('#total_row').text($('#input_body .row').length);
    // 自动聚焦到新行的第一个输入框并选中内容
    $newRow.find('input:first').focus().select();
  });

  // 2. 任意输入框内容变化时，自动跳转到下一个输入框
  $('#input_body').on('change', 'input', function() {
    const allInputs = $('#input_body input');
    const currentIndex = allInputs.index($(this));
    // 如果不是最后一个输入框，就跳转到下一个
    if (currentIndex < allInputs.length - 1) {
      allInputs.eq(currentIndex + 1).focus().select();
    }
  });

  // 3. 删除行逻辑
  $('#input_body').on('click', '.remove-btn', function() {
    const $currentRow = $(this).closest('.row');
    const totalRows = $('#input_body .row').length;
    // 至少保留一行，避免输入框全部被删
    if (totalRows > 1) {
      $currentRow.remove();
      $('#total_row').text(totalRows - 1);
    } else {
      // 只剩一行时清空输入值，而不是删除
      $currentRow.find('input').val('').first().focus();
    }
  });

  // 页面加载完成后，自动聚焦到第一个输入框
  $('#input_body input:first').focus().select();
});

关键改进点说明 #

• 事件委托绑定：用$('#input_body').on()的方式绑定事件，不管新增多少行，新元素都会自动继承事件，彻底解决重复绑定的问题。
• 精准索引计算：通过allInputs.index($(this))获取当前输入框的位置，自动跳转逻辑准确可靠，不会因为增删行混乱。
• 移除重复ID：删掉了原代码中重复的id="1"，改用类选择器操作元素，避免DOM冲突。
• 优化用户体验：新增行后自动聚焦到新输入框并选中内容，输入值变化后跳转时也做选中处理，用户输入更顺畅。
• 合理删除逻辑：确保至少保留一行输入框，避免出现没有输入区域的尴尬情况，只剩一行时清空内容而非删除。
• 告别内联事件：把原有的onclick、onfocus换成jQuery的事件绑定，代码更整洁，也避免了全局函数污染。

备注：内容来源于stack exchange，提问作者Developer Account