jQuery focus not working in Chrome

Question

Please see this fiddle: http://jsfiddle.net/yg49k/

The following code works fine in FireFox but doesn't work in the latest version of Chrome.

HTML:

<input type="text" id="one" placeholder="Type two chars" /> <input type="text" id="two" placeholder="It should focus here" /> 

jQuery:

$("#one").on("input", function() {     if($("#one").val().length == 2) { $("#two").focus(); } }); 

Does anyone know how I can get around this?

Answer 1

Seems like a bug in Chrome. Sometimes it is too fast to execute events properly;)

Found a workaround http://jsfiddle.net/Rd2rZ/

$("#one").on("input", function() {     if($("#one").val().length == 2) {          setTimeout(function(){             $("#two").focus();         }, 1);     } }); 

Use setTimeout with a minimal delay. It will slow down Chrome and make it work.

Answer 2

You should use:

$("#one").on("keyup paste",function() {     console.log($(this).val());     if($(this).val().length == 2) { $("#two").focus(); } }); 

DEMO

And the same for the #five handler.

The oninput event seems to have the same behaviour as onkeypress.