在onblur处理程序中，document.activeElement返回body

Question

这是我的HTML和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()" />

我试图在已设置正确tabindex的文本框上使用onblur来设置焦点。

当我调用JavaScript函数onblur并尝试获取document.activeElement时，它总是返回body元素，而不是焦点所在的活动元素。

如何返回活动元素而不是body？

- Jigar Parekh

---

http://molily.de/weblog/javascript-fokus-zentral 列出了一个跨浏览器的 document.activeElement 函数。 - Michael Besteck

Answer 1

在离开旧元素和进入新元素之间，活动元素实际上是文档/主体本身。

演示: http://jsfiddle.net/u3uNP/

- ThiefMaster

---

谢谢，我明白了。我认为可以通过异步方式进行调用，在 AJAX 事件后将焦点设置在正确的元素上。 - Jigar Parekh

那么你如何确保找到新元素而不是主体？ - strava

@Strava，请查看我的回答。 - OfirD

Answer 2

@ThiefMaster解释了原因，我想再补充一个获取新焦点元素的解决方案:

使用focusout代替onblur，并利用relatedTarget属性：

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

- OfirD

---

在React中使用onBlur，原因。 - Amir2mi

如果你有机会来到内布拉斯加州的奥马哈市，我欠你一杯啤酒。 - TehShrike