focus() doesn't take cursor into field

Question

I'm trying to force the cursor to go back to its previous input when the value is wrong. Here is a simpler version of the script I use :

$('input:first-child').blur(function(e){
    console.log('here');
  $('input:first-child').focus();
});

It works when I click on another element to focusout but does not when I click on the body or another div element. Why? ​ I have a jsfiddle case : http://jsfiddle.net/leyou/Zabn4/37/

Edit: I was testing on Chrome/Win7, but with Firefox it seems worse. It's totally ignoring focus()

Answer 1

This happens because the blur has not yet completed. Do it with a small timeout and it would work:

$('input:first-child').blur(function(e){
    setTimeout(function () { $('input:first-child').focus(); }, 20);
});

Answer 2

try this

$('input:first-child').blur(function(e){
    console.log('here');
    setTimeout(function() { $('input:first-child').focus(); }, 500);
});