Keypress and keydown events if user enters too quickly

Question

I do not know how to solve this problem:

The user can begin to enter some numerical values ​​in the input fields. The cursor moves to the next input field after entering the number. But this does not work, if the user enters too quickly, this means that there is no keyboard between the two numbers.

So, if the user enters "12" - instead of "1" and "2" - there should be a value of "1" in the first input field, a value of "2" in the second input field and focus should be set in 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 an input event combining both conditions, and it will work for several user actions, such as 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> 

Answer 2

You can simply add the code that you have to the keyup event trigger on the keyboard.

 $('input').on('keydown', function(event) { if (event.shiftKey || event.which <= 47 || event.which >= 58) { return false; } if (event.currentTarget.value.length >= 1) { $(event.currentTarget).next('input').focus(); } }); 

http://jsfiddle.net/bbeg17r8/2/

Answer 3

You need to be more complex in order to handle this well, especially if the user uses paste to enter their PIN code (which they should not, but will).

I would remove the maxlength and propagate the text to the input as I maxlength . keypress is the best event for working with actual text keystrokes, and then of course we want change and input .

Here's a rough version:

 $('input').on('keypress input change', function(event) { setTimeout(handleInputs, 0); }); function handleInputs() { var focussed = false; var inputs = $("input").get(); // Collect the values var text = inputs.reduce( function(acc, input) { return acc + input.value; }, "" ); // ...adjust `text` here if you want... // Distribute the values inputs.forEach(function(input, index) { input.value = text.charAt(index); if (!focussed && !input.value) { console.log("Focussing " + this.name); input.focus(); focussed = true; } }); } 

Live example:

 $('input').on('keypress input change', function(event) { setTimeout(handleInputs, 0); }); function handleInputs() { var focussed = false; var inputs = $("input").get(); var text = inputs.reduce( function(acc, input) { return acc + input.value; }, "" ); inputs.forEach(function(input, index) { input.value = text.charAt(index); if (!focussed && !input.value) { console.log("Focussing " + this.name); input.focus(); focussed = true; } }); } 

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

Answer 4

This is what you could use to handle all situations (I can think of):

 $("input").on('change keyup paste', function(event) { if(event.which === 9) return; // tab pressed, keep default behaviour var char = this.value.slice(0, 1); if (!/\d/.test(char)) this.value = ""; else $(this).next('input').focus(); }); 

-jsFiddle -

(using text type input to make it more understandable)

PS: I'm tired of jsFiddle, I am not updating the correct one. Since the last jsFiddle of the main update, it really pushes me ...