jQuery / javascript - Skip input when maxlength is reached

Question

jQuery / javascript - Skip input when maxlength is reached

Navigation

#1 by (5 votes)

2

Good morning, friends!

Next, I want to make a function that if it reaches the maxlength of the input (in the case 2 characters), it jumps to the next input. I made the code below that is not running ...

var inputZin = $('.idade-viajantes only-number');
var jumpInput = function() {
  if(inputZin.value.length == 2) {
    $(this).parents(input).next.focus();
  }
}

<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" onkeyup="jumpInput()"/>
            <input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" onkeyup="jumpInput()"/>
            <input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" onkeyup="jumpInput()"/>
            <input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" onkeyup="jumpInput()"/>
            <input class="idade-viajantes only-number" name="idade" maxlength="2" type="text"/>
            
         <script src="jquery.js"></script>

Previously, I had done a logic in pure javascript, but used id's on each input ... so I tried doing jQuery to use "parents" and "next" only that it's not rolling.

Thank you in advance!

javascript jquery

asked by anonymous 06.11.2018 / 13:44

1 answer

Problem with AVL tree vector When can I use static in the class?

score 5 · Accepted Answer

Try

$(".idade-viajantes").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).next('.idade-viajantes').focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputclass="idade-viajantes only-number" name="idade" maxlength="2" type="text" />
<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" />
<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" />
<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" />
<input class="idade-viajantes only-number" name="idade" maxlength="2" type="text" />