Get the newly focussed element (if any) from the onBlur event.

Question

I need to get the newly focussed element (if any) while executing an onBlur handler.

How can I do this?

I can think of some awful solutions, but nothing whic

Answer 1

Why not using focusout event? https://developer.mozilla.org/en-US/docs/Web/Events/focusout

relatedTarget property will give you the element that is receiving the focus.

Answer 2

Reference it with:

document.activeElement

Unfortunately the new element isn't focused as the blur event happens, so this will report body. So you are gonna have to hack it with flags and focus event, or use setTimeout.

$("input").blur(function() {
    setTimeout(function() {
        console.log(document.activeElement);
    }, 1);
});​

Works fine.

---

Without setTimeout, you can use this:

http://jsfiddle.net/RKtdm/

(function() {
    var blurred = false,
        testIs = $([document.body, document, document.documentElement]);
    //Don't customize this, especially "focusIN" should NOT be changed to "focus"
    $(document).on("focusin", function() {

        if (blurred) {
            var elem = document.activeElement;

            blurred = false;

            if (!$(elem).is(testIs)) {
                doSomethingWith(elem); //If we reached here, then we have what you need.
            }

        }

    });
    //This is customizable to an extent, set your selectors up here and set blurred = true in the function
    $("input").blur(function() {
        blurred = true;
    });

})();​

//Your custom handler
function doSomethingWith(elem) {
     console.log(elem);
}