How can I detect which control initiated a blur event using JavaScript/jQuery?

Question

I have a radiobuttonlist; when item[1] is clicked a textbox is displayed and my custom jQuery validator is bound to the textbox onblur event. Here's a pared down version of my validator:

function AddMyValidator() {
    $("input[id$='myTxt']").blur(function(e) {
        var val = this.value.replace(" ", "");
        if (val.length == 0) {
            //need to determine firing control here and show error message if not parent radiobuttonlist.item[0]
            this.focus();
            $("span[id$='myError']").html("<span style='color:red;'>Error!</span>").show().animate({ opacity: 1.0 }, 3000).fadeOut("slow");
            return false;
        }
        return true;
    });
}

I would like to be able to determine if the blur event was fired by item[0], and only display my error message when it is not. Any suggestions would be greatly appreciated.

score 0 · Answer 1 · answered Mar 12 '10 at 22:16

0

Check e.srcElement

answered Mar 12 '10 at 22:16

David Morton

16,338
3
63
73

Thanks for your help. I tried it, without success. I already have a handle on $(this) - the control I'm blurring away from. What I need is a handle on the firing control or the control which will get focus when I return true. – tbilly Mar 12 '10 at 22:26

score 0 · Accepted Answer · edited May 23 '17 at 12:01

I ended up finding the answer here

When onblur occurs, how can I find out which element focus went *to*?

This is essentially what I ended up with..

function AddMyValidator() { 
$("input[id$='myTxt']").blur(function(e) { 
    var val = this.value.replace(" ", ""); 
    if (val.length == 0) { 
        var target = e.explicitOriginalTarget || document.activeElement;
        if (!target.id.endsWith("myRadioButtonList_0")){
            this.focus(); 
            $("span[id$='myError']").html("<span style='color:red;'>Error!</span>").show().animate({ opacity: 1.0 }, 3000).fadeOut("slow"); 
            return false; 
        }
    } 
    return true; 
});

}

Thanks.

PS. This works fine in IE8, but not in Firefox 3.6. It seems that explicitOriginalTarget is no longer supported by Firefox. I'm still looking for a good cross-browser way of doing this.

How can I detect which control initiated a blur event using JavaScript/jQuery?

2 Answers2