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

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

演示：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" />

Answer 3

要解决此问题，请将document.activeElement替换为this。

JsFiddle：https://jsfiddle.net/PseudoNinja/8oq0c1by/

document.activeelement返回body

3 个答案: