Why $(this).focus(); will not work on the same element when focusout in jquery

Question

Initially i was trying to validate a user input when i stumbled with a problem is that i cant fix the cursor of the focus on an element when focusing out. this is the code

$("#ChapterCode").keydown(function(e){
    if(e.keyCode==9 || e.keyCode==13){
        if($(this).val()!=""){
            ChapterCode();
            get_fees();
            return true;
        }else{
            $(this).focus();
            return false;
        }
    }
});

this will work as return false will prohibit the focus from changing when clicking a TAB. however

$("#ChapterCode").focusout(function(e){
        if($(this).val()!=""){
            ChapterCode();
            get_fees();
            return true;
        }else{
            e.preventDefault();
            $(this).focus();
            return false;
        }
    });

this wont work same as for blur any help ? i added e.preventDefault(); knowing that it wont work just in case. Help is really appreciated thanks again. Please dont tell me to create an error message or something like that coz its simply out of the question.

Answer 1

It looks like different browser behavior there.

In Chrome it works just like that. You can set the focus within the blur or focusout.

FireFox does not this. You need to wrap it into a setTimeout().

$("#ChapterCode").focusout(function(e){
    if($(this).val()!=""){
        ChapterCode();
        get_fees();
        return true;
    }else{
        var self = $(this);
        setTimeout(function(){
          self.focus();
        }, 1);            
        return false;
    }
});

This will setback the focus to #ChapterCode. You cannot completly prevent the box from losing the focus. You need to introduce a variable that holds the this reference, which can be accessed via closure from setTimeout().

Example: http://www.jsfiddle.net/hGjwZ/1/

Answer 2

well am not a registered user and i came here today to check up am sorry i dunno where to mark as correct :/