How should I fire Javascript blur event after click event that causes the blur?

Spread the love

Question Description

I have run into this problem a few times and I’m not happy with the solutions I’ve used before.

I have an input box with a blur event that validates the content of it and a button which will fill the input box on click. The problem is clicking the button fires the input blur event and then the button click event so content inserted by the button is not what is validated.

See http://jsfiddle.net/jakecr/dL3K3/

I know this is the correct behavior but I can’t think of a clean way to get around the problem.

Practice As Follows

We had a similar problem at work. what we figured out in the end
was that the mousedown event will fire before the blur event
allowing you to set the content before the validation or even cancel the validation
process completely using a flag.

check this fiddle I made using your example-
http://jsfiddle.net/dL3K3/31/

$(function(){
    var flag = true;
    $('input').blur(function(){
        if(!$(this).val() && flag){
            alert("Grrr, It's empty");
        }
    });

    $('button').mousedown(function(){
        flag = false;
    });    
    $('button').mouseup(function(){
        flag = true;
        $('input').val('content').focus();
    });

});

-Edit-

As @mclin Suggested, using the mousedown event and preventDefault will prevent blur behavior.
And you can just leave the original click event intact –

http://jsfiddle.net/dL3K3/364/

$(function(){
    $('input').blur(function(){
        if(!$(this).val()){
            alert("Grrr, It's empty");
        }
    });

    $('button').mousedown(function(e){
        e.preventDefault();
    });    
    $('button').click(function(){
        $('input').val('content');
    });

});

This solution might be a bit cleaner and better for most cases just note that if you use it you’ll preventDefault and blur of any other element the focus is currently on but for most use cases that shouldn’t be an issue.

You may be interested in these books.

#CommissionsEarned

As an Amazon Associate I earn from qualifying purchases.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.