javascript - How to focus next input field on keypress

Question

I am making a mobile application. I want to implement this function where on pressing the key, the next input field is focused. I tried many things but none seem to be working. This is my code. I tried using onClick but when i touch it, it goes 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 a pure Jquery or Javascript solution. Thanks in advance.

Answer 1

How about:

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

So on key up, if there is a value, focus the next. Using keyup allows you to validate the contents rather than skipping right away. They might switch to number mode on iOS for example which would trigger the focus if you simply use keypress.

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