javascript - When a 'blur' event occurs, how can I find out which element focus went *to*? -


suppose attach blur function html input box this:

<input id="myinput" onblur="function() { ... }"></input> 

is there way id of element caused blur event fire (the element clicked) inside function? how?

for example, suppose have span this:

<span id="myspan">hello world</span> 

if click span right after input element has focus, input element lose focus. how function know myspan clicked?

ps: if onclick event of span occur before onblur event of input element problem solved, because set status value indicating specific element had been clicked.

pps: background of problem want trigger ajax autocompleter control externally (from clickable element) show suggestions, without suggestions disappearing because of blur event on input element. want check in blur function if 1 specific element has been clicked, , if so, ignore blur event.

hmm... in firefox, can use explicitoriginaltarget pull element clicked on. expected toelement same ie, not appear work... however, can pull newly-focused element document:

function showblur(ev) {    var target = ev.explicitoriginaltarget||document.activeelement;    document.getelementbyid("focused").value =        target ? target.id||target.tagname||target : ''; }  ...  <button id="btn1" onblur="showblur(event)">button 1</button> <button id="btn2" onblur="showblur(event)">button 2</button> <button id="btn3" onblur="showblur(event)">button 3</button> <input id="focused" type="text" disabled="disabled" /> 

caveat: technique not work focus changes caused tabbing through fields keyboard, , not work @ in chrome or safari. big problem using activeelement (except in ie) is not consistently updated until after blur event has been processed, , may have no valid value @ during processing! can mitigated variation on the technique michiel ended using:

function showblur(ev) {   // use timeout delay examination of activeelement until after blur/focus    // events have been processed.   settimeout(function()   {     var target = document.activeelement;     document.getelementbyid("focused").value =        target ? target.id||target.tagname||target : '';   }, 1); } 

this should work in modern browsers (tested in chrome, ie, , firefox), caveat chrome not set focus on buttons clicked (vs. tabbed to).


Comments

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

asp.net - In javascript how to find the height and width -

c# - DataTable to EnumerableRowCollection -