document.activeElement returns body in onblur handler

Question

Here is my HTML and JS:

function invokeFunc() {
  // ajax request 
  alert(document.activeElement);
  // this returns body element in firefox, safari and chrome.
}

<input id="text1" tabindex="1" onblur="invokeFunc()" />
<input id="text2" tabindex="2" onblur="invokeFunc()" />

I am trying set focus onblur on text boxes with proper tabindex set.

When I invoke the JavaScript function onblur and try to get document.activeElement it always returns the body element instead of the active element where focus is.

How can I return the active element rather than the body?

http://molily.de/weblog/javascript-fokus-zentral lists a cross-browser document.activeElement function. — Michael Besteck, Jul 02 '12 at 19:31

score 16 · Accepted Answer · answered Jul 02 '12 at 19:20

16

Between leaving the old element and entering the new element the active element is indeed the document/body itself.

Demo: http://jsfiddle.net/u3uNP/

answered Jul 02 '12 at 19:20

ThiefMaster

310,957
84
592
636

1

Thanks got it.. i think can make this call in async way to set focus on correct element after ajax event. – Jigar Parekh Jul 03 '12 at 13:44
2

So how would you ensure that you find the new element and not the body? – strava Feb 22 '21 at 15:09
@strava, see my answer. – OfirD May 06 '21 at 12:03

score 14 · Answer 2 · answered May 06 '21 at 11:46

14

@ThiefMaster explained the reason, and I want to add a solution for getting the newly focused element:

Use focusout instead of onblur, and then utilize relatedTarget property:

const inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
  inputs[i].addEventListener('focusout', (event) => {  
    console.log('newly focused element:', event.relatedTarget); 
  });
}

<input id="text1" tabindex="1" />
<input id="text2" tabindex="2" />

answered May 06 '21 at 11:46

OfirD

9,442
5
47
90

In React use the `onBlur`, [reason](https://stackoverflow.com/a/37609092/15172167) – Amir2mi May 09 '23 at 11:25
1

if you're ever in Omaha Nebraska, I owe you a beer – TehShrike Aug 30 '23 at 17:55

document.activeElement returns body in onblur handler

2 Answers2

Linked

Related