32

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?

rybo111
  • 12,240
  • 4
  • 61
  • 70

5 Answers5

75

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.

rybo111
  • 12,240
  • 4
  • 61
  • 70
claustrofob
  • 5,448
  • 2
  • 19
  • 22
  • Works perfectly and doesn't compromise the otherwise very useful `on("input...` – rybo111 Jun 29 '13 at 20:59
  • 2
    ya, it's simple even no need to set any delay for the timeout – A. Wolff Jun 29 '13 at 21:00
  • Yes, very useful event that replaces a use of a bunch of other events. However it is not supported in IE < 9. Use `onpropertychange` event for old IEs. – claustrofob Jun 29 '13 at 21:02
  • @roasted - you're right, I've removed `, 1` and it works fine. Thanks. – rybo111 Jun 29 '13 at 21:08
  • 2
    @roasted Actually there is no difference to set 0 or 1 because different browsers cannot register timeouts less then some amount of ms. This value may vary from 4 up to 20 ms on mobile browsers. http://stackoverflow.com/questions/8341803/difference-between-settimeoutfn-0-and-settimeoutfn-1 – claustrofob Jun 29 '13 at 21:24
  • @claustrofob ya exactly, that's why i said there is no need to set a timeout duration, this save 2 bytes :) `setTimeout(function(){ $("#two").focus(); });` But spec said duration is required, so.. BTW forgot to upvote this. – A. Wolff Jun 29 '13 at 21:33
  • http://underscorejs.org/#defer's `_.defer` is also possible instead of setTimeout with a delay of 0; works for me. – Dexygen Dec 26 '13 at 17:25
  • great tip! note that this won't work from the console: http://stackoverflow.com/questions/14783585/jquery-focus-command-doesnt-work-from-chrome-command-line?rq=1 – ptim Nov 07 '14 at 05:19
  • I've found several functions in side events that were seeming to be ignored, added a timeout wrapper to them and they all work. I never would have figured this work around out on my own, Thank you kindly. – DiamondDrake Apr 01 '16 at 04:52
  • I had to use 600 before it started working on Firefox and Chrome properly, possibly as a result of other JavaScript code / Bootstrap. – SharpC Nov 17 '16 at 12:54
3

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.

SharpC
  • 6,974
  • 4
  • 45
  • 40
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • Does the `on("keyup paste...` method have any downsides in comparison to `on("input...`? I've found it to be reliable (other than when using `focus()` apparently...) – rybo111 Jun 29 '13 at 20:48
  • sorry misread comment. Like i said the downside would be that on blurred element will not fired this handler compare to oninput – A. Wolff Jun 29 '13 at 20:52
  • Fair enough. I've noticed if you keep the key pressed down it ignores the function whereas `input` does not. – rybo111 Jun 29 '13 at 20:55
  • test with keypress then. But be aware, onkeypress is not fired by basckspace in chrome – A. Wolff Jun 29 '13 at 20:56
0
$("#one").keydown(function(){
   if($(this).val().length==2)
   {
      $("#two").focus();
   }
});
Sahin Yanlık
  • 1,171
  • 2
  • 11
  • 21
0

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

Try this!

Suresh Suryawanshi
  • 1
  • 1
  • This question was posted in 2013, and was actually a bug in Chrome, as per the accepted answer. There's nothing wrong with the JS in the question. – rybo111 Dec 02 '22 at 09:03
-5

I got the same problem and got it fixed using the following code:
You should also have a name attribute for your input to get this working. 

$("#one").on("input", null, null, function() {  
   if($("#one").val().length == 2) {  
       setTimeout(function() { $('input[name="one"]').focus() }, 3000);  
   }  
});

Hope this helps someone who did not get it working using the other suggestions.

Seema Gopinath
  • 1
  • 3