Focus next input once reaching maxlength in different containers

Question

I want to focus next input once the input field reach the maxlength, but the input fields are in different containers.

My Code:

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="date" class="container_date"> <div class="date_day" id="input_day"> <input type="text" maxlength="2" name="input_day" id="1" value=""> </div> <div class="date_month" id="input_month"> <input type="text" maxlength="2" name="input_month" id="2" value=""> </div> <div class="date_year" id="input_year"> <input type="text" maxlength="4" name="input_year" id="3" value=""> </div> </div> <div id="time" class="container_time"> <div class="time_hour" id="input_hour"> <input type="text" maxlength="2" name="input_hour" id="1" value=""> </div> <div class="time_minute" id="input_minute"> <input type="text" maxlength="2" name="input_minute" id="2" value=""> </div> </div> 

The Jquery works for input fields in the same div/container, but not in a different one. How to focus also in another div/container?

Answer 1

You could try to get a list of all related input-fields by traversing the DOM up until a certain parent element and looking for each input, determining the current input element and select the next one.

I would propose a different solution: use the tabindex attribute.

div class="date_day" id="input_day">
    <input type="text" maxlength="2" tabindex="1" name="input_day" id="1" value="">
</div>
<div class="date_month" id="input_month">
    <input type="text" maxlength="2" tabindex="2" name="input_month" id="2" value="">
</div>
<div class="date_year" id="input_year">
    <input type="text" maxlength="4" tabindex="3" name="input_year" id="3" value="">
</div>

With this you can create a non-linear movement in regard to the "next" field. The focus can easily be moved to the next one:

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

Answer 2

Get the index of the current input by searching the matched elements $('input').index(this) Then you can select the next input in the matched elements with .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(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="date" class="container_date"> <div class="date_day" id="input_day"> <input type="text" maxlength="2" name="input_day" id="1" value=""> </div> <div class="date_month" id="input_month"> <input type="text" maxlength="2" name="input_month" id="2" value=""> </div> <div class="date_year" id="input_year"> <input type="text" maxlength="4" name="input_year" id="3" value=""> </div> </div> <div id="time" class="container_time"> <div class="time_hour" id="input_hour"> <input type="text" maxlength="2" name="input_hour" id="1" value=""> </div> <div class="time_minute" id="input_minute"> <input type="text" maxlength="2" name="input_minute" id="2" value=""> </div> </div>