9

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 which doesn't involve setTimeout.

fadedbee
  • 42,671
  • 44
  • 178
  • 308

2 Answers2

26

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);
}
Esailija
  • 138,174
  • 23
  • 272
  • 326
  • That's what I feared. I'll accept this answer in a couple of days, if there's no non-setTimeout solution. – fadedbee Jul 21 '12 at 14:58
  • @chrisdew I can do something with the focus event, but I believe it's going to be more complicated than a simple timeout. – Esailija Jul 21 '12 at 15:02
7

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.

Diego Hueltes
  • 71
  • 1
  • 1