When a 'Blur' Event Occurs, How to Find Out Which Element Focus Went *To*

When a 'blur' event occurs, how can I find out which element focus went *to*?

Hmm... In Firefox, you can use explicitOriginalTarget to pull the element that was clicked on. I expected toElement to do the same for IE, but it does not appear to work... However, you can pull the newly-focused element from the document:

function showBlur(ev)
{
   var target = ev.explicitOriginalTarget||document.activeElement;
   document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
}

...

<button id="btn1" onblur="showBlur(event)">Button 1</button>
<button id="btn2" onblur="showBlur(event)">Button 2</button>
<button id="btn3" onblur="showBlur(event)">Button 3</button>
<input id="focused" type="text" disabled="disabled" />

---

Caveat: This technique does not work for focus changes caused by tabbing through fields with the keyboard, and does not work at all in Chrome or Safari. The big problem with using activeElement (except in IE) is that it is not consistently updated until after the blur event has been processed, and may have no valid value at all during processing! This can be mitigated with a variation on the technique Michiel ended up using:

function showBlur(ev)
{
  // Use timeout to delay examination of activeElement until after blur/focus 
  // events have been processed.
  setTimeout(function()
  {
    var target = document.activeElement;
    document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
  }, 1);
}

This should work in most modern browsers (tested in Chrome, IE, and Firefox), with the caveat that Chrome does not set focus on buttons that are clicked (vs. tabbed to).

javascript blur event -- is there any way to detect which element now has focus?

Answered here; When onblur occurs, how can I find out which element focus went to?

How can tell I which element i clicked on to trigger a blur event handler?

Check this fiddle:

http://jsfiddle.net/pHQwH/

The solution sets the active element on document's mousedown which is triggered for all elements in the document and uses that to determine whether or not to executed the code in blur event.

CODE

---

var currElem = null;

$(document).mousedown(function(e) {
    currElem = e.target;
});

$('#f1').blur(function() {
    if(currElem != null && currElem.id != "f3") {
        $(this).val('F1: clicked elem is not f3, blur event worked');
        // do your blur stuff here
    }
    else {
        // for demo only, comment this part out
        $(this).val('F1: clicked elem is f3, no blur event');
    }
});

How to determine where focus went?

You can try something like this:

function whereDidYouGo() {
    var all = document.getElementsByTagName('*');

        for (var i = 0; i < all.length; i++)
            if (all[i] === all[i].ownerDocument.activeElement)
                return all[i];
}

EDIT:

function whereDidYouGo() { return document.activeElement; }

Is it guaranteed that blur() event happens before the focus() when giving focus to a new element?

As of W3C draft DOM3 Events, the specification tells you:

Focus Event Order

The focus events defined in this specification occur in a set order
relative to one another. The following is the typical sequence of
events when a focus is shifted between elements (this order assumes
that no element is initially focused):

> User shifts focus
> 1.    focusin Sent before first target element receives focus
> 2.    focus   Sent after first target element receives focus 
> User shifts focus
> 3.    focusout    Sent before first target element loses focus
> 4.    focusin Sent before second target element receives focus
> 5.    blur    Sent after first target element loses focus
> 6.    focus   Sent after second target element receives focus

Note that the statement that there cannot be two elements with focus is not completely correct; although I am not aware of desktop environments that let two widgets have focus at the same time, the specification lets an implementation decide that:

Other specifications may define a more complex focus model than is described in this specification, including allowing multiple elements to have the current focus.

Also this is worth mention:

A host language may define specific elements which might receive focus, the conditions under which an element may receive focus, the means by which focus may be changed, and the order in which the focus changes. (italic is mine).

However, beware that Chrome does not follow the standard - instead the order is blur, focusout, focus, focusin. You can test this using this page. Webkit browsers may have the same issue. The focusin and focusout events are supported since Firefox 52.

ionBlur Event: Detect the element that is receiving the focus

Ionic 5.3 finally added this feature.

You can now access the element which is gaining focus via ionBlurEvent.detail.relatedTarget.

Note that ionBlurEvent.detail contains the "original" HTML FocusEvent.

Note also that the FocusEvent.relatedTarget may still be null — in case that no "focusable" element receives focus. See also: blur event.relatedTarget returns null

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

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);
}

How to get the focus event following the blur event?

-- Edit:

Having reviewed your question I'm not quite sure what you're asking, so I'm not sure if what I've posted is suitable. Regardless, I leave it here for consideration.

You can do it quite trivially with a map and the 'this' variable:

var map = new Object();

...

function doBlur (obj) {
   if(map[obj] == "focus"){
   }
}

function doFocus (obj) {
    map[obj] = "focus";
}

<input onblur="doBlur(this);" onfocus="doFocus(this);" />

But even further, given that only one textbox can be focused at a time, you can just have a variable named lastFocus, and check that that object equals the one you want.

---

Related Topics