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 13 · Accepted Answer · answered Jul 02 '12 at 19:20

13

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

298,938
77
579
623

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
1

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 6 · Answer 2 · answered May 06 '21 at 11:46

@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" />

document.activeElement returns body in onblur handler

2 Answers2

Linked

Related