How do I find out which DOM element has the focus

Question

I would like to find out  in JavaScript  which element currently has focus  I ve been looking through the DOM and haven t found what I need  yet  Is there a way to do this  and how   The reason I was looking for this   I m trying to make keys like the arrows and enter navigate through a table of input elements  Tab works now  but enter  and arrows do not by default it seems  I ve got the key handling part set up but now I need to figure out how to move the focus over in the event handling functions

User · Answer

As said by JW  you can t find the current focused element  at least in a browser-independent way  But if your app is IE only  some are      you can find it the following way    document activeElement   EDIT  It looks like IE did not have everything wrong after all  this is part of HTML5 draft and seems to be supported by the latest version of Chrome  Safari and Firefox at least

User · Answer

A little helper that I ve used for these purposes in Mootools   FocusTracker         startFocusTracking  function            this store  hasFocus   false          this addEvent  focus   function     this store  hasFocus   true              this addEvent  blur   function     this store  hasFocus   false                   hasFocus  function            return this retrieve  hasFocus             Element implement FocusTracker     This way you can check if element has focus with el hasFocus   provided that startFocusTracking   has been called on the given element

User · Answer

document activeElement is now part of the HTML5 working draft specification  but it might not yet be supported in some non-major mobile older browsers   You can fall back to querySelector  if that is supported    It s also worth mentioning that document activeElement will return document body if no element is focused  mdash  even if the browser window doesn t have focus   The following code will work around this issue and fall back to querySelector giving a little better support   var focused   document activeElement  if   focused    focused    document body      focused   null  else if  document querySelector      focused   document querySelector   focus      An addition thing to note is the performance difference between these two methods   Querying the document with selectors will always be much slower than accessing the activeElement property   See this jsperf com test

User · Answer

JQuery does support the  focus pseudo-class as of current   If you are looking for it in the JQuery documentation  check under  Selectors  where it points you to the W3C CSS docs   I ve tested with Chrome  FF  and IE 7    Note that for it to work in IE   lt  DOCTYPE    must exist on the html page   Here is an example assuming you ve assigned an id to the element that has focus       focus   each function       alert   this  attr  id       has focus

User · Answer

Use document activeElement  it is supported in all major browsers   Previously  if you were trying to find out what form field has focus  you could not  To emulate detection within older browsers  add a  focus  event handler to all fields and record the last-focused field in a variable  Add a  blur  handler to clear the variable upon a blur event for the last-focused field   If you need to remove the activeElement you can use blur  document activeElement blur    It will change the activeElement to body   Related links    activeElement Browser Compatibility jQuery alternative for document activeElement

User · Answer

There are potential problems with using document activeElement  Consider    lt div contentEditable  true  gt     lt div gt Some text lt  div gt     lt div gt Some text lt  div gt     lt div gt Some text lt  div gt   lt  div gt    If the user focuses on an inner-div  then document activeElement still references the outer div  You cannot use document activeElement to determine which of the inner div s has focus   The following function gets around this  and returns the focused node   function active node      return window getSelection   anchorNode      If you would rather get the focused element  use   function active element      var anchor   window getSelection   anchorNode    if anchor nodeType    3           return anchor parentNode     else if anchor nodeType    1           return anchor

User · Answer

If you can use jQuery  it now supports  focus  just make sure you are using version 1 6    This statement will get you the currently focused element       focus     From  How to select an element that has focus on it with jQuery

User · Answer

With dojo  you can use dijit getFocus

User · Answer

As said by JW  you can t find the current focused element  at least in a browser-independent way  But if your app is IE only  some are      you can find it the following way    document activeElement   EDIT  It looks like IE did not have everything wrong after all  this is part of HTML5 draft and seems to be supported by the latest version of Chrome  Safari and Firefox at least

User · Answer

If you re using jQuery  you can use this to find out if an element is active      input id   is   active

User · Answer

Just putting this here to give the solution I eventually came up with   I created a property called document activeInputArea  and used jQuery s HotKeys addon to trap keyboard events for arrow keys  tab and enter  and I created an event handler for clicking into input elements   Then I adjusted the activeInputArea every time focus changed  so I could use that property to find out where I was   It s easy to screw this up though  because if you have a bug in the system and focus isn t where you think it is  then its very hard to restore the correct focus

User · Answer

I have found the following snippet to be useful when trying to determine which element currently has focus  Copy the following into the console of your browser  and every second it will print out the details of the current element that has focus   setInterval function     console log document querySelector   focus        1000     Feel free to modify the console log to log out something different to help you pinpoint the exact element if printing out the whole element does not help you pinpoint the element

User · Answer

If you want to get a object that is instance of Element  you must use document activeElement  but if you want to get a object that is instance of Text  you must to use document getSelection   focusNode   I hope helps

User · Answer

If you can use jQuery  it now supports  focus  just make sure you are using version 1 6    This statement will get you the currently focused element       focus     From  How to select an element that has focus on it with jQuery

User · Answer

I liked the approach used by Joel S  but I also love the simplicity of document activeElement  I used jQuery and combined the two  Older browsers that don t support document activeElement will use jQuery data   to store the value of  hasFocus   Newer browsers will use document activeElement  I assume that document activeElement will have better performance    function      var settings    fn focusTracker   function options        settings     extend       focusTracker defaults  options        if   document activeElement            this each function                 var  this     this  data  hasFocus   false                 this focus function event                     this data  hasFocus   true                                this blur function event                     this data  hasFocus   false                                         return this        fn hasFocus   function         if  this length     0    return false        if  document activeElement            return this get 0      document activeElement            return this data  hasFocus          focusTracker         defaults            context   body             focusedElement  function context            var focused          if   context    context   settings context            if  document activeElement                if    document activeElement  closest context  length  gt  0                    focused   document activeElement                          else                   visible enabled   context  each function                     if    this  data  hasFocus                          focused   this                      return false                                                      return   focused               jQuery

User · Answer

As said by JW  you can t find the current focused element  at least in a browser-independent way  But if your app is IE only  some are      you can find it the following way    document activeElement   EDIT  It looks like IE did not have everything wrong after all  this is part of HTML5 draft and seems to be supported by the latest version of Chrome  Safari and Firefox at least

User · Answer

If you re using jQuery  you can use this to find out if an element is active      input id   is   active

User · Answer

document activeElement may default to the  lt body gt  element if no focusable elements are in focus  Additionally  if an element is focused and the browser window is blurred  activeElement will continue to hold the focused element   If either of these two behaviors are not desirable  consider a CSS-based approach  document querySelector    focus

User · Answer

By itself  document activeElement can still return an element if the document isn t focused  and thus nothing in the document is focused    You may want that behavior  or it may not matter  e g  within a keydown event   but if you need to know something is actually focused  you can additionally check document hasFocus     The following will give you the focused element if there is one  or else null    var focused element   null  if       document hasFocus    amp  amp      document activeElement     document body  amp  amp      document activeElement     document documentElement         focused element   document activeElement      To check whether a specific element has focus  it s simpler   var input focused   document activeElement     input  amp  amp  document hasFocus      To check whether anything is focused  it s more complex again   var anything is focused         document hasFocus    amp  amp      document activeElement     null  amp  amp      document activeElement     document body  amp  amp      document activeElement     document documentElement        Robustness Note  In the code where it the checks against document body and document documentElement  this is because some browsers return one of these or null when nothing is focused   It doesn t account for if the  lt body gt   or maybe  lt html gt   had a tabIndex attribute and thus could actually be focused  If you re writing a library or something and want it to be robust  you should probably handle that somehow     Here s a  heavy airquotes   one-liner  version of getting the focused element  which is conceptually more complicated because you have to know about short-circuiting  and y know  it obviously doesn t fit on one line  assuming you want it to be readable  I m not gonna recommend this one  But if you re a 1337 hax0r  idk    it s there  You could also remove the    null part if you don t mind getting false in some cases   You could still get null if document activeElement is null    var focused element         document hasFocus    amp  amp      document activeElement     document body  amp  amp      document activeElement     document documentElement  amp  amp      document activeElement      null      For checking if a specific element is focused  alternatively you could use events  but this way requires setup  and potentially teardown   and importantly  assumes an initial state   var input focused   false  input addEventListener  focus   function         input focused   true      input addEventListener  blur   function         input focused   false        You could fix the initial state assumption by using the non-evented way  but then you might as well just use that instead

User · Answer

Use document activeElement  it is supported in all major browsers   Previously  if you were trying to find out what form field has focus  you could not  To emulate detection within older browsers  add a  focus  event handler to all fields and record the last-focused field in a variable  Add a  blur  handler to clear the variable upon a blur event for the last-focused field   If you need to remove the activeElement you can use blur  document activeElement blur    It will change the activeElement to body   Related links    activeElement Browser Compatibility jQuery alternative for document activeElement

User · Answer

By itself  document activeElement can still return an element if the document isn t focused  and thus nothing in the document is focused    You may want that behavior  or it may not matter  e g  within a keydown event   but if you need to know something is actually focused  you can additionally check document hasFocus     The following will give you the focused element if there is one  or else null    var focused element   null  if       document hasFocus    amp  amp      document activeElement     document body  amp  amp      document activeElement     document documentElement         focused element   document activeElement      To check whether a specific element has focus  it s simpler   var input focused   document activeElement     input  amp  amp  document hasFocus      To check whether anything is focused  it s more complex again   var anything is focused         document hasFocus    amp  amp      document activeElement     null  amp  amp      document activeElement     document body  amp  amp      document activeElement     document documentElement        Robustness Note  In the code where it the checks against document body and document documentElement  this is because some browsers return one of these or null when nothing is focused   It doesn t account for if the  lt body gt   or maybe  lt html gt   had a tabIndex attribute and thus could actually be focused  If you re writing a library or something and want it to be robust  you should probably handle that somehow     Here s a  heavy airquotes   one-liner  version of getting the focused element  which is conceptually more complicated because you have to know about short-circuiting  and y know  it obviously doesn t fit on one line  assuming you want it to be readable  I m not gonna recommend this one  But if you re a 1337 hax0r  idk    it s there  You could also remove the    null part if you don t mind getting false in some cases   You could still get null if document activeElement is null    var focused element         document hasFocus    amp  amp      document activeElement     document body  amp  amp      document activeElement     document documentElement  amp  amp      document activeElement      null      For checking if a specific element is focused  alternatively you could use events  but this way requires setup  and potentially teardown   and importantly  assumes an initial state   var input focused   false  input addEventListener  focus   function         input focused   true      input addEventListener  blur   function         input focused   false        You could fix the initial state assumption by using the non-evented way  but then you might as well just use that instead

User · Answer

Use document activeElement  it is supported in all major browsers   Previously  if you were trying to find out what form field has focus  you could not  To emulate detection within older browsers  add a  focus  event handler to all fields and record the last-focused field in a variable  Add a  blur  handler to clear the variable upon a blur event for the last-focused field   If you need to remove the activeElement you can use blur  document activeElement blur    It will change the activeElement to body   Related links    activeElement Browser Compatibility jQuery alternative for document activeElement

User · Answer

Reading other answers  and trying myself  it seems document activeElement will give you the element you need in most browsers   If you have a browser that doesn t support document activeElement if you have jQuery around  you should be able populate it on all focus events with something very simple like this  untested as I don t have a browser meeting those criteria to hand    if  typeof document activeElement      undefined        Check browser doesn t do it anyway          live  focus   function         Attach to all focus events using  live       document activeElement   this     Set activeElement to the element that has been focussed

User · Answer

I have found the following snippet to be useful when trying to determine which element currently has focus  Copy the following into the console of your browser  and every second it will print out the details of the current element that has focus   setInterval function     console log document querySelector   focus        1000     Feel free to modify the console log to log out something different to help you pinpoint the exact element if printing out the whole element does not help you pinpoint the element

User · Answer

With dojo  you can use dijit getFocus

User · Answer

If you want to get a object that is instance of Element  you must use document activeElement  but if you want to get a object that is instance of Text  you must to use document getSelection   focusNode   I hope helps

User · Answer

Just putting this here to give the solution I eventually came up with   I created a property called document activeInputArea  and used jQuery s HotKeys addon to trap keyboard events for arrow keys  tab and enter  and I created an event handler for clicking into input elements   Then I adjusted the activeInputArea every time focus changed  so I could use that property to find out where I was   It s easy to screw this up though  because if you have a bug in the system and focus isn t where you think it is  then its very hard to restore the correct focus

User · Answer

There are potential problems with using document activeElement  Consider    lt div contentEditable  true  gt     lt div gt Some text lt  div gt     lt div gt Some text lt  div gt     lt div gt Some text lt  div gt   lt  div gt    If the user focuses on an inner-div  then document activeElement still references the outer div  You cannot use document activeElement to determine which of the inner div s has focus   The following function gets around this  and returns the focused node   function active node      return window getSelection   anchorNode      If you would rather get the focused element  use   function active element      var anchor   window getSelection   anchorNode    if anchor nodeType    3           return anchor parentNode     else if anchor nodeType    1           return anchor

User · Answer

JQuery does support the  focus pseudo-class as of current   If you are looking for it in the JQuery documentation  check under  Selectors  where it points you to the W3C CSS docs   I ve tested with Chrome  FF  and IE 7    Note that for it to work in IE   lt  DOCTYPE    must exist on the html page   Here is an example assuming you ve assigned an id to the element that has focus       focus   each function       alert   this  attr  id       has focus

User · Answer

I liked the approach used by Joel S  but I also love the simplicity of document activeElement  I used jQuery and combined the two  Older browsers that don t support document activeElement will use jQuery data   to store the value of  hasFocus   Newer browsers will use document activeElement  I assume that document activeElement will have better performance    function      var settings    fn focusTracker   function options        settings     extend       focusTracker defaults  options        if   document activeElement            this each function                 var  this     this  data  hasFocus   false                 this focus function event                     this data  hasFocus   true                                this blur function event                     this data  hasFocus   false                                         return this        fn hasFocus   function         if  this length     0    return false        if  document activeElement            return this get 0      document activeElement            return this data  hasFocus          focusTracker         defaults            context   body             focusedElement  function context            var focused          if   context    context   settings context            if  document activeElement                if    document activeElement  closest context  length  gt  0                    focused   document activeElement                          else                   visible enabled   context  each function                     if    this  data  hasFocus                          focused   this                      return false                                                      return   focused               jQuery

User · Answer

Reading other answers  and trying myself  it seems document activeElement will give you the element you need in most browsers   If you have a browser that doesn t support document activeElement if you have jQuery around  you should be able populate it on all focus events with something very simple like this  untested as I don t have a browser meeting those criteria to hand    if  typeof document activeElement      undefined        Check browser doesn t do it anyway          live  focus   function         Attach to all focus events using  live       document activeElement   this     Set activeElement to the element that has been focussed

User · Answer

As said by JW  you can t find the current focused element  at least in a browser-independent way  But if your app is IE only  some are      you can find it the following way    document activeElement   EDIT  It looks like IE did not have everything wrong after all  this is part of HTML5 draft and seems to be supported by the latest version of Chrome  Safari and Firefox at least

User · Answer

document activeElement is now part of the HTML5 working draft specification  but it might not yet be supported in some non-major mobile older browsers   You can fall back to querySelector  if that is supported    It s also worth mentioning that document activeElement will return document body if no element is focused  mdash  even if the browser window doesn t have focus   The following code will work around this issue and fall back to querySelector giving a little better support   var focused   document activeElement  if   focused    focused    document body      focused   null  else if  document querySelector      focused   document querySelector   focus      An addition thing to note is the performance difference between these two methods   Querying the document with selectors will always be much slower than accessing the activeElement property   See this jsperf com test

User · Answer

A little helper that I ve used for these purposes in Mootools   FocusTracker         startFocusTracking  function            this store  hasFocus   false          this addEvent  focus   function     this store  hasFocus   true              this addEvent  blur   function     this store  hasFocus   false                   hasFocus  function            return this retrieve  hasFocus             Element implement FocusTracker     This way you can check if element has focus with el hasFocus   provided that startFocusTracking   has been called on the given element

User · Answer

document activeElement may default to the  lt body gt  element if no focusable elements are in focus  Additionally  if an element is focused and the browser window is blurred  activeElement will continue to hold the focused element   If either of these two behaviors are not desirable  consider a CSS-based approach  document querySelector    focus

User · Answer

Use document activeElement  it is supported in all major browsers   Previously  if you were trying to find out what form field has focus  you could not  To emulate detection within older browsers  add a  focus  event handler to all fields and record the last-focused field in a variable  Add a  blur  handler to clear the variable upon a blur event for the last-focused field   If you need to remove the activeElement you can use blur  document activeElement blur    It will change the activeElement to body   Related links    activeElement Browser Compatibility jQuery alternative for document activeElement

[javascript] How do I find out which DOM element has the focus?

Examples related to javascript

Examples related to dom