JS实现按键触发后自动跳转输入框及检测最后输入框问题排查

我明白你现在遇到的问题啦——想实现输入内容后自动跳转到下一个输入框，但next()选择器总是选不到目标元素，其实问题出在HTML结构和选择器的匹配逻辑上，我来帮你拆解并解决：

问题根源 #

你的每个输入框都包裹在独立的<div class="col-xs-1">容器里，$(this).next()只会查找当前input的同级元素，但当前input的同级没有其他input，自然选不到目标元素。我们需要先定位到输入框的父容器，再找下一个父容器里的输入框。

完整解决方案 #

首先补全你未写完的HTML结构（确保所有包裹input的div类名正确）：

<form method="POST" action="">
  <div id="confirm-input">
    @csrf
    <div class="col-xs-1">
      <input type="text" class="form-control input" maxlength="1"/>
    </div>
    <div class="col-xs-1">
      <input type="text" class="form-control input" maxlength="1"/>
    </div>
    <div class="col-xs-1">
      <input type="text" class="form-control input" maxlength="1"/>
    </div>
    <div class="col-xs-1">
      <input type="text" class="form-control input" maxlength="1"/>
    </div>
  </div>
</form>

然后用以下jQuery代码实现跳转逻辑，还额外加了退格键跳回上一个输入框的功能，体验更完整：

$(document).ready(function() {
  // 输入内容后自动跳转到下一个输入框
  $('.input').on('input', function() {
    // 检查当前输入框是否已填满（达到maxlength限制）
    if ($(this).val().length === parseInt($(this).attr('maxlength'))) {
      // 先找当前输入框的父容器，再找下一个同类型容器，最后获取里面的input
      const nextInput = $(this).parent().next('.col-xs-1').find('.input');
      if (nextInput.length) {
        nextInput.focus(); // 聚焦到下一个输入框
      }
    }
  });

  // 退格键清空当前输入框后，自动跳回上一个输入框（可选功能）
  $('.input').on('keydown', function(e) {
    if (e.key === 'Backspace' && $(this).val().length === 0) {
      // 找当前输入框的父容器的上一个同类型容器，获取里面的input
      const prevInput = $(this).parent().prev('.col-xs-1').find('.input');
      if (prevInput.length) {
        prevInput.focus(); // 聚焦到上一个输入框
      }
    }
  });
});

关键逻辑说明 #

• $(this).parent()：获取当前输入框的父容器（也就是<div class="col-xs-1">）
• .next('.col-xs-1')：找到父容器的下一个兄弟容器（确保只匹配同类型的容器，避免意外选中其他元素）
• .find('.input')：在目标容器里找到输入框元素，最后调用focus()完成跳转

注意事项 #

• 确保你的页面已经正确引入了jQuery库，否则代码无法生效
• 检查所有包裹输入框的div类名是否统一为col-xs-1，避免选择器匹配失败
• 如果你的输入框数量更多，只要保持相同的嵌套结构，这个逻辑依然可以正常工作

内容的提问来源于stack exchange，提问作者Tony Sawlwin