div包裹input时无法自动聚焦下一个输入框的问题求助

嘿，我懂你现在的困扰——既要保留用col-xs-3 div实现的对齐布局，又要让输入框填满后自动聚焦到下一个对吧？

为啥原来的代码不好使？ #

你之前用的$(this).next().focus()，是找当前input的直接同级元素。但每个input都被单独的col-xs-3 div包起来了，当前input的同级根本没有其他input，自然没法触发聚焦啦。

改完就能用的解决方案 #

我们换个思路：先找到当前input的父div，再定位到它的下一个兄弟div，最后在这个div里找到input并聚焦。而且还要加个判断，避免最后一个输入框填满后报错。修改后的JS代码如下：

$(document).ready(function(){
  $('input').keyup(function(){
    if ($(this).val().length == $(this).attr("maxlength")) {
      // 先找父div，再找下一个兄弟div里的input
      const nextInput = $(this).parent().next().find('input');
      // 确保存在下一个输入框再聚焦，避免报错
      if (nextInput.length) {
        nextInput.focus();
      }
    }
  });
});

小补充 #

• 这个改动完全不会影响你原来的布局，col-xs-3的对齐效果依然保留。
• 加的nextInput.length判断，能防止最后一个输入框在填满后，因为找不到下一个元素而在控制台出现错误提示。

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