How to focus the next input field when you press a key

Question

I am making a mobile application. I want to implement this function when pressing the key focuses the next input field. I tried a lot of things but nobody seems to work. This is my code. I tried using onClick, but when I touch it, it moves on to the next field.

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

I want to use pure jquery or javascript . Thanks in advance.

Answer 1

What about:

$('input.mobile-verify.pass').on('keyup', function() {
    if ($(this).val()) {
        $(this).next().focus();
    }
});

, , . keyup , . , iOS, , .

Codepen: http://codepen.io/anon/pen/qaGKzk

Answer 2

.next() .trigger():

$(".mobile-verify.pass").on("keypress", function(e){
  $(this).next().trigger("focus");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" class="mobile-verify pass" name="code[]" />
<input type="number" class="mobile-verify pass" name="code[]" />
<input type="number" class="mobile-verify pass" name="code[]" />
<input type="number" class="mobile-verify pass" name="code[]" />

Hide result

: maxlength maxlength, maxlength, input type = "number"

Answer 3

.keypress() .focus() jQuery.

Answer 4

JavaScript keypress focus, :

var elems = [].slice.call(document.querySelectorAll('.mobile-verify.pass'));

elems.forEach(function(el, i, array) {
  el.onkeypress = function(event) {
    // Validate key is a number
    var keycode = event.which;
    if (!(event.shiftKey === false && 
        (keycode === 46 || keycode === 8 || keycode === 37 || keycode === 39 || 
        (keycode >= 48 && keycode <= 57)))) {
      return;
    }

    var nextInput = i + 1;
    if (nextInput < array.length) {
        array[nextInput].focus();
    }
  };
});

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

Hide result

Answer 5

keypress() . focus()

:

$(document).ready(function (){
  $("input.mobile-verify.pass").keypress(function(){
    $(this).next().trigger('focus');
    //or $(this).next().focus();	
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

Hide result

JS

var allElements = document.querySelectorAll('.mobile-verify.pass');
var i;
for (i = 0; i < allElements.length; i++) {
  var el = allElements[i];
  el.addEventListener("keypress", function () {
    this.nextSibling.nextSibling.focus();
  });
}

<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

Hide result

NB:, , 2 nextSibling, , ,

Answer 6

. ,

[].slice.call

, . , Element, HtmlElement. - querySelectorAll HtmlElements.