document.activeElement 在 onblur 处理程序中返回正文答案

【问题标题】：document.activeElement returns body in onblur handlerdocument.activeElement 在 onblur 处理程序中返回正文
【发布时间】：2012-07-03 05:32:31
【问题描述】：

这是我的 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 设置的文本框上。

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

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

【问题讨论】：

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

标签： javascript html tabindex

【解决方案1】：

在离开旧元素和进入新元素之间，活动元素确实是文档/正文本身。

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

【讨论】：

谢谢..我认为可以在 ajax 事件后以异步方式进行此调用以将焦点设置在正确的元素上。
那么如何确保找到新元素而不是正文？
@strava，看看我的回答。

【解决方案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" />

【讨论】：