keyup and keydown events, if user is typing too fast

Question

I don't know how to solve this problem:

The user can start typing some numeric values in the input fields. The cursor will move to the next input field, after typing a number. But it doesn't work, if the user is typing too fast, that means if there is no keyup between two numbers.

So if the user is typing "12" - instead of "1" and "2" -, there should be the value "1" in the first input field, value "2" in the second input field and the focus should be set to the third input field.

<form>
    <input type="password" maxlength="1" name="pin1" autofocus />
    <input type="password" maxlength="1" name="pin2" />
    <input type="password" maxlength="1" name="pin3" />
    <input type="password" maxlength="1" name="pin4" />
</form>

$('form input').on('keydown', function(event) {        
    if (event.shiftKey || event.which <= 47 || event.which >= 58)
        return false;

}).on('keyup', function (event) {
    if (event.currentTarget.value.length >= 1)
        $(event.currentTarget).next('input').focus();
});

http://jsfiddle.net/bbeg17r8/

Answer 1

Have you tried with input event combining both conditions and it will work for multiple user actions like key events, cut/paste events etc.:

$('form input').on('input keypress', function(event) {     
    if (event.type == "keypress" && (event.shiftKey || event.which <= 47 || event.which >= 58))
        return false;


    if (event.currentTarget.value.length >= 1)
        $(event.currentTarget).next('input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="password" maxlength="1" name="pin1" autofocus />
    <input type="password" maxlength="1" name="pin2" />
    <input type="password" maxlength="1" name="pin3" />
    <input type="password" maxlength="1" name="pin4" />
</form>