Move focus to next input in another div

Question

I have the following code:

 <div class="postcode">
    <div>
        <input type="text" maxlength="4">
    </div>
    <div>
        <input type="text" maxlength="4">
    </div>  
</div>

I need Jquery to automatically focus on the next input once 4 characters have been entered. I have tried the following, but this only works if the inputs are next to each other:

$(".postcode input").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.postcode input').focus();
    }
});

This also means that when I shift+tab, it keeps focusing on the next div.

Lastly, I also need it to go back to the first input if the user deletes all characters from the second input.

Does this answer your question? [How do I move focus to next input with jQuery?](https://stackoverflow.com/questions/2455225/how-do-i-move-focus-to-next-input-with-jquery) — Heretic Monkey, Dec 09 '19 at 16:02

Alon Pini · Accepted Answer · 2019-12-09T16:13:49.597

Move to the next Input

Use parent() to select the parent <div>, move to the next() DIV, and find() the child input to focus on it. Note that you should add :first in order to apply the function on the first input.

$(".postcode input:first").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).parent().next().find('input').focus();
    }
});

Shift+Tab keeps on focus

Add focus event to trigger the same input's keyup event to focus the second input again.

$(".postcode input:first").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).parent().next().find('input').focus();
    }
}).focus(function(){
    $(this).trigger('keyup');
});

That works exactly as it should, thanks! How do I do the opposite so that when the character count gets to 0 (or maybe when its zero and the user presses backspace) in the second box, the focus goes back on the first? — Ruben Kretek, Dec 10 '19 at 09:02

Marwen Jaffel · Answer 2 · 2019-12-09T16:27:37.777

try this code that id for each input and add all code in documuent read function :

  <script>
   $(document).ready(function(){
    $("#id1").keyup(function () {
  if (this.value.length == this.maxLength) {
  $('#id2').focus();
  }
  });
  });
  </script>
  <div class="postcode">
  <div>
    <input id="id1" type="text" maxlength="4">
  </div>
  <div>
    <input id="id2" type="text" maxlength="4">
  </div>  
 </div>

Ruben Kretek · Answer 3 · 2019-12-10T10:49:50.597

This is the solution I used (partly suggested by Alon Pini):

jQuery(function($) {

    // Tab to next item when maxlength is reached
    $(".postcode div:nth-child(1) input").keyup(function () {
        if (this.value.length == this.maxLength) {
            $(this).parent().next().find('input').focus();
        }
    });

    // Tab to previous item when pressing backspace and character count is 0
    $("postcode div:nth-child(2) input").on('keyup', function(e) {
        if(e.which==8) {
            if (this.value.length == 0) {
                $(this).parent().prev().find('input').focus();
            }
        }
    });

});

This solution does both, focuses on next item when character count has reached max length, and focuses on previous item when character count has reached zero in the second input field.

Move focus to next input in another div

3 Answers3

Move to the next Input

Shift+Tab keeps on focus