javascript - document.activeElement 在 onblur 处理程序中返回正文

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

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

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

Answer 1

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

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

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