When a blur event occurs how can I find out which element focus went to

Question

Suppose I attach an blur function to an HTML input box like this    lt input id  myInput  onblur  function            gt  lt  input gt    Is there a way to get the ID of the element which caused the blur event to fire  the element which was clicked  inside the function  How   For example  suppose I have a span like this    lt span id  mySpan  gt Hello World lt  span gt    If I click the span right after the input element has focus  the input element will lose its focus  How does the function know that it was mySpan that was clicked   PS  If the onclick event of the span would occur before the onblur event of the input element my problem would be solved  because I could set some status value indicating a specific element had been clicked   PPS  The background of this problem is that I want to trigger an AJAX autocompleter control externally  from a clickable element  to show its suggestions  without the suggestions disappearing immediately because of the blur event on the input element  So I want to check in the blur function if one specific element has been clicked  and if so  ignore the blur event

User · Accepted Answer

Hmm    In Firefox  you can use explicitOriginalTarget to pull the element that was clicked on  I expected toElement to do the same for IE  but it does not appear to work    However  you can pull the newly-focused element from the document   function showBlur ev       var target   ev explicitOriginalTarget  document activeElement     document getElementById  focused   value          target   target id  target tagName  target                lt button id  btn1  onblur  showBlur event   gt Button 1 lt  button gt   lt button id  btn2  onblur  showBlur event   gt Button 2 lt  button gt   lt button id  btn3  onblur  showBlur event   gt Button 3 lt  button gt   lt input id  focused  type  text  disabled  disabled    gt      Caveat  This technique does not work for focus changes caused by tabbing through fields with the keyboard  and does not work at all in Chrome or Safari  The big problem with using activeElement  except in IE  is that it is not consistently updated until after the blur event has been processed  and may have no valid value at all during processing  This can be mitigated with a variation on the technique Michiel ended up using   function showBlur ev         Use timeout to 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 most modern browsers  tested in Chrome  IE  and Firefox   with the caveat that Chrome does not set focus on buttons that are clicked  vs  tabbed to

User · Answer

I suggest using global variables blurfrom and blurto   Then  configure all elements you care about to assign their position in the DOM to the variable blurfrom when they lose focus   Additionally  configure them so that gaining focus sets the variable blurto to their position in the DOM   Then  you could use another function altogether to analyze the blurfrom and blurto data

User · Answer

document activeElement could be a parent node  for example body node because it is in a temporary phase switching from a target to another   so it is not usable for your scope ev explicitOriginalTarget is not always valued   So the best way is to use onclick on body event for understanding indirectly your node event target  is on blur

User · Answer

The type FocusEvent instances have relatedTarget attribute  however  up to version 47 of the FF  specifically  this attribute returns null  from 48 already works   You can to see more here

User · Answer

I see only hacks in the answers  but there s actually a builtin solution very easy to use   Basically you can capture the focus element like this   const focusedElement   document activeElement   https   developer mozilla org en-US docs Web API DocumentOrShadowRoot activeElement

User · Answer

I am also trying to make Autocompleter ignore blurring if a specific element clicked and have a working solution  but for only Firefox due to explicitOriginalTarget  Autocompleter Base prototype onBlur   Autocompleter Base prototype onBlur wrap           function origfunc  ev                if    this options ignoreBlurEventElement                     var newTargetElement    ev explicitOriginalTarget nodeType    3   ev explicitOriginalTarget parentNode   ev explicitOriginalTarget                   if   newTargetElement descendantOf   this options ignoreBlurEventElement                          return origfunc ev                                                      This code wraps default onBlur method of Autocompleter and checks if ignoreBlurEventElement parameters is set  if it is set  it checks everytime to see if clicked element is ignoreBlurEventElement or not  If it is  Autocompleter does not cal onBlur  else it calls onBlur  The only problem with this is that it only works in Firefox because explicitOriginalTarget property is Mozilla specific   Now I am trying to find a different way than using explicitOriginalTarget  The solution you have mentioned requires you to add onclick behaviour manually to the element  If I can t manage to solve explicitOriginalTarget issue  I guess I will follow your solution

User · Answer

You could make it like this    lt script type  text javascript  gt  function myFunction thisElement         document getElementByName thisElement  0      lt  script gt   lt input type  text  name  txtInput1  onBlur  myFunction this name    gt

User · Answer

I solved it eventually with a timeout on the onblur event  thanks to the advice of a friend who is not StackOverflow     lt input id  myInput  onblur  setTimeout function    alert clickSrc    200    gt  lt  input gt   lt span onclick  clickSrc  mySpan    id  mySpan  gt Hello World lt  span gt    Works both in FF and IE

User · Answer

i think it s not possibe  with IE you can try to use window event toElement  but it dosn t work with firefox

User · Answer

2015 answer  according to UI Events  you can use the relatedTarget property of the event      Used to identify a secondary EventTarget related to a Focus   event  depending on the type of event    For blur events      relatedTarget  event target receiving focus    Example    x000D   x000D  function blurListener event    x000D    event target className    blurred   x000D    if event relatedTarget  x000D      event relatedTarget className    focused   x000D    x000D     forEach call document querySelectorAll  input    function el    x000D    el addEventListener  blur   blurListener  false   x000D      x000D   blurred   background  orange   x000D   focused   background  lime   x000D   lt p gt Blurred elements will become orange  lt  p gt  x000D   lt p gt Focused elements should become lime  lt  p gt  x000D   lt input   gt  lt input   gt  lt input   gt  x000D   x000D   x000D    Note Firefox won t support relatedTarget until version 48  bug 962251  MDN

User · Answer

Works in Google Chrome v66 x  Mozilla v59 x and Microsoft Edge    Solution with jQuery      I test in Internet Explorer 9 and not supported         YourElement   blur function e        var InputTarget      e relatedTarget  attr  id       GET ID Element      console log InputTarget        if target     YourId        If you want validate or make a action to specfic element                  your code              Comment your test in others internet explorer versions

User · Answer

As noted in this answer  you can check the value of document activeElement  document is a global variable  so you don t have to do any magic to use it in your onBlur handler   function myOnBlur e      if document activeElement            document getElementById  elementToCheckForFocus             Focus went where we expected

User · Answer

It s possible to use mousedown event of document instead of blur     document  mousedown function      if    event target  attr  id       mySpan            some process

User · Answer

Can you reverse what you re checking and when   That is if you remeber what was blurred last    lt input id  myInput  onblur  lastBlurred this   gt  lt  input gt    and then in the onClick for your span  call function   with both objects    lt span id  mySpan  onClick  function lastBlurred  this    gt Hello World lt  span gt    Your function could then decide whether or not to trigger the Ajax AutoCompleter control  The function has the clicked object and the blurred object  The onBlur has already happened so it won t make the suggestions disappear

User · Answer

I ve been playing with this same feature and found out that FF  IE  Chrome and Opera have the ability to provide the source element of an event   I haven t tested Safari but my guess is it might have something similar       Form   keyup function  e        var ctrl   null      if  e originalEvent explicitOriginalTarget       FF         ctrl   e originalEvent explicitOriginalTarget            else if  e originalEvent srcElement       IE  Chrome and Opera         ctrl   e originalEvent srcElement

User · Answer

This way    lt script type  text javascript  gt      function yourFunction element            alert element          lt  script gt   lt input id  myinput  onblur  yourFunction this   gt    Or if you attach the listener via JavaScript  jQuery in this example    var input       myinput   blur function         alert this         Edit  sorry  I misread the question

User · Answer

I think its easily possible via jquery by passing the reference of the field causing the onblur event in  this   For e g    lt input type  text  id  text1  onblur  showMessageOnOnblur this   gt   function showMessageOnOnblur field       alert   field  attr  id         Thanks Monika

User · Answer

I wrote an alternative solution how to make any element focusable and  blurable    It s based on making an element as contentEditable and hiding visually it and disabling edit mode itself   el addEventListener  keydown   function e      e preventDefault      e stopPropagation         el addEventListener  blur   cbBlur   el contentEditable   true    DEMO  Note  Tested in Chrome  Firefox  and Safari  OS X   Not sure about IE     Related  I was searching for a solution for VueJs  so for those who interested curious how to implement such functionality using Vue Focusable directive  please take a look

User · Answer

I am also trying to make Autocompleter ignore blurring if a specific element clicked and have a working solution  but for only Firefox due to explicitOriginalTarget  Autocompleter Base prototype onBlur   Autocompleter Base prototype onBlur wrap           function origfunc  ev                if    this options ignoreBlurEventElement                     var newTargetElement    ev explicitOriginalTarget nodeType    3   ev explicitOriginalTarget parentNode   ev explicitOriginalTarget                   if   newTargetElement descendantOf   this options ignoreBlurEventElement                          return origfunc ev                                                      This code wraps default onBlur method of Autocompleter and checks if ignoreBlurEventElement parameters is set  if it is set  it checks everytime to see if clicked element is ignoreBlurEventElement or not  If it is  Autocompleter does not cal onBlur  else it calls onBlur  The only problem with this is that it only works in Firefox because explicitOriginalTarget property is Mozilla specific   Now I am trying to find a different way than using explicitOriginalTarget  The solution you have mentioned requires you to add onclick behaviour manually to the element  If I can t manage to solve explicitOriginalTarget issue  I guess I will follow your solution

User · Answer

Use something like this   var myVar   null    And then inside your function   myVar   fldID    And then   setTimeout setFocus 1000    And then   function setFocus    document getElementById fldID  focus        Final code    lt html gt   lt head gt       lt script type  text javascript  gt          function somefunction                var myVar   null               myVar   document getElementById  myInput                 if myVar value                      setTimeout setFocusOnJobTitle 1000               else                 myVar value  Success                     function setFocusOnJobTitle                document getElementById  myInput   focus                   lt  script gt   lt  head gt   lt body gt   lt label id  jobTitleId  for  myInput  gt Job Title lt  label gt   lt input id  myInput  onblur  somefunction     gt  lt  input gt   lt  body gt   lt  html gt

User · Answer

You can fix IE with     event currentTarget firstChild ownerDocument activeElement   It looks like  explicitOriginalTarget  for FF   Antoine And J

User · Answer

keep in mind  that the solution with explicitOriginalTarget does not work for text-input-to-text-input jumps   try to replace buttons with the following text-inputs and you will see the difference    lt input id  btn1  onblur  showBlur event   value  text1  gt   lt input id  btn2  onblur  showBlur event   value  text2  gt   lt input id  btn3  onblur  showBlur event   value  text3  gt

User · Answer

Edit  A hacky way to do it would be to create a variable that keeps track of focus for every element you care about  So  if you care that  myInput  lost focus  set a variable to it on focus    lt script type  text javascript  gt     var lastFocusedElement   lt  script gt   lt input id  myInput  onFocus  lastFocusedElement this     gt    Original Answer  You can pass  this  to the function    lt input id  myInput  onblur  function this      var theId   this id     will be  myInput       gt

User · Answer

I do not like using timeout when coding javascript so I would do it the opposite way of Michiel Borkent   Did not try the code behind but you should get the idea     lt input id  myInput  onblur  blured   this id   gt  lt  input gt   lt span onfocus    sortOfCallback this id   id  mySpan  gt Hello World lt  span gt    In the head something like that   lt head gt       lt script type  text javascript  gt          function sortOfCallback id               bluredElement   document getElementById blured                  Do whatever you want on the blured element with the id of the focus element                   lt  script gt   lt  head gt

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

Examples related to javascript

Examples related to events

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

Examples related to javascript

Examples related to events

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