Question

I am sorry if this is a duplicate, but I cannot find the answer to my question. Please send me a link if you know where it has already been answered.

I am using jquery to bind a function to the onblur event of a textbox.
The objective is to trigger a postback only when the focus leaves the textboxes in the tblUserDetails table.
When a textbox loses focus:

• In IE, the new focused element is the new selected textbox.
• In Chrome, document gets focused in between the two textboxes, so that $(document.activeElement) never points to the newly selected textbox.

Here is my code, which works in IE, but not in Chrome:

SaveNetworkDetails: function () {

    // Trigger the blur event when one of the textboxes loses focus
    $("[id$=tblUserDetails]").find('input[id*="txt"]').blur(function (e) {

        // Check if the new focused element is among the textboxes
        if ($(document.activeElement).parents("[id$=tblUserDetails]").length == 0) {
            // Trigger postback
        }
    });
}

How can I find the newly selected textbox in Chrome in the function bound to the blur event?

Regards,

Gilles

Answer 1

A small misconception here: .blur() does not trigger the blur event, it binds a function to the blur event, meaning you set a function that will be triggered when the blur occurs.

Perhaps that misconception is the root cause of your issue.

Update

I’ve re-read the question and now I see what you are trying to achieve. Although your text leads one to think you are programatically triggering the blur, your issue is the fact that, in chrome, the document gets the temporary focus when a control is left.

Instead of triggering the postback on the first input’s blur, you should trigger the postback on the next input’s focus. By what I see in your code, this change would not matter much, but would solve your issue.