CODEWITHSUNDEEP
javascripthtmljquerycss
JeVic
JeVic

Reputation: 681

Auto tab on next input with Div container

I have created an input which auto tab the field after one character is entered however when I try to separate them with a div container, it stop working or going to the next input field. Without the div container, auto tab works fine

HTML

<div class="field_one">
<input type="text" class="myField" maxlength="1" > 
<input type="text" class="myField" maxlength="1" >
<input type="text" class="myField" maxlength="1" >
</div>
<div class="field_two">
<input type="text" class="myField" maxlength="1" >
<input type="text" class="myField" maxlength="1" >
<input type="text" class="myField" maxlength="1" >
</div>
 <div class="field_three">
 <input type="text" class="myField" maxlength="1" >
 <input type="text" class="myField" maxlength="1" >
 <input type="text" class="myField" maxlength="1" >
 </div>

jQuery

jQuery(".myField").keyup(function () {
if (this.value.length == this.maxLength) {
  jQuery(this).next('.myField').focus();
}
});

Upvotes: 0

Views: 466

Answers (1)

Toxnyc
Toxnyc

Reputation: 1350

next is a sibling selector, so you will have to find a way to go to the next container once you finished with all the siblings of the current container. Something like this.

jQuery(".myField").keyup(function () {
  if (this.value.length == this.maxLength) {
    if (jQuery(this).index() === jQuery(this).siblings().length) {
      jQuery(this).parent().next("div").find(".myField").first().focus();
    } else {
      jQuery(this).next(".myField").focus();
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field_one">
    <input type="text" class="myField" maxlength="1">
    <input type="text" class="myField" maxlength="1">
    <input type="text" class="myField" maxlength="1">
</div>
<div class="field_two">
    <input type="text" class="myField" maxlength="1">
    <input type="text" class="myField" maxlength="1">
    <input type="text" class="myField" maxlength="1">
</div>
<div class="field_three">
    <input type="text" class="myField" maxlength="1">
    <input type="text" class="myField" maxlength="1">
    <input type="text" class="myField" maxlength="1">
</div>

Upvotes: 1

Related Questions