在不同容器中达到最大长度后，将下一个输入聚焦

我希望在输入字段达到maxlength后关注下一个输入，但输入字段位于不同的容器中。

我的代码：

$(document).ready(function(){ $('input').keyup(function(){ if($(this).val().length==$(this).attr("maxlength")){ $(this).next().focus(); } }); }); 

Jquery适用于同一div /容器中的输入字段，但不适用于不同的输入字段。 如何关注另一个div /容器？

Answer 1

通过搜索匹配的元素$('input').index(this)得到当前输入的$('input').index(this) .eq(i+1) $('input').index(this)然后你可以用.eq(i+1)选择匹配元素中的下一个输入

 $(document).ready(function(){ $('input').keyup(function(){ if($(this).val().length==$(this).attr("maxlength")){ var i = $('input').index(this); $('input').eq(i+1).focus(); } }); }); 

Answer 2

您可以尝试获取所有相关输入字段的列表，方法是遍历DOM直到某个父元素并查找每个输入，确定当前输入元素并选择下一个输入元素。

我会提出一个不同的解决方案：使用tabindex属性。

 div class="date_day" id="input_day">   
  
 
   

有了这个，你可以创建一个关于“下一个”字段的非线性运动。 重点可以轻松转移到下一个：

 $('input').keyup(function(){ if($(this).val().length==$(this).attr("maxlength")){ var tabIndex = +$(this).attr('tabindex'); $('[tabindex=' + (+tabIndex+1) + ']').focus(); } });