Search jQuery

jQuery Forum

JQuery Focus, after blur

in Using jQuery • 1 year ago

I have two form elements, the first one I'm testing for a specific content length (5). If there is not that much content in the box, I would like it to continue to have focus.

However my code below will not set the focus back.. What am I missing?

jQuery( function($){
    $(document).ready( function(){
        $("#Transit_Number").blur( function(e){
            if ( $(this).val().length != 5 ){
                e.stopPropagation();
                e.preventDefault();
                $("#Transit_Number").focus();
                alert('Transit Number Must be 5 digits long');
            }
        });
    });

});

Replies(4)

sime.vidas

Re: JQuery Focus, after blur

1 year ago

I believe this is the correct way of limiting the scope of the $ variable:

(function($) {

$(document).ready(function() {

// jQuery code here

});

})(jQuery);

--
Šime Vidas
http://www.w3viewer.com

Akhor

Re: JQuery Focus, after blur

1 year ago

Actually both syntax's are correct.

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Anyhow if you could answer the original question, that would be helpful.

sime.vidas

Re: JQuery Focus, after blur

1 year ago

This is correct:

jQuery(document).ready(function($){
// jQuery code here
});

You are doing this which is not correct:

jQuery(function($){

$(document).ready(function(){

// jQuery code here

});

You are nesting two ready binders. I believe this is the reason why your code fails....

--
Šime Vidas
http://www.w3viewer.com

Akhor

Re: JQuery Focus, after blur

1 year ago

For anyone that's interested. The answer is as follows.

To set the focus BACK to the originating form element on a Blur event, you must wait for that event to complete. Calling event.stopPropagation() or event.preventDefault() will not stop the blur event.

In order to wait for it to complete you must use a timer. Below is an example of working code.

jQuery( function($){
    $(document).ready( function(){
        $("#Transit_Number").blur( function(e){
            if ( $(this).val().length != 5 ){

                alert('Transit Number Must be 5 digits long');
                setTimeout(function() { $("#Transit_Number").focus(); }, 50);
            }
        });
});
});