document.activeelement返回body

Question

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

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

我正在尝试使用适当的tabindex设置在文本框上设置焦点onblur.

当我调用javascript函数onblur并尝试获取document.activeelement然后它总是返回我的body元素而不是焦点所在的active元素.

Answer 1

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

Answer 2

在离开旧元素和输入新元素之间,活动元素确实是文档/正文本身.

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