document.activeelement returns 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.
}

i am trying set focus onblur on text boxes with proper tabindex set.

when i invoke javascript function onblur and try to get document.activeelement then it always return me body element instead of active element where focus is.

Answer 1

Between leaving the old element and entering the new element the active element is indeed the document/body itself.

Demo: http://jsfiddle.net/u3uNP/

Answer 2

To Solve this problem replace document.activeElement with this.

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