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>
See Question&Answers more detail:os