Using jQuery to test if an input has focus

Question

On the front page of a site I am building  several  lt div gt s use the CSS  hover pseudo-class to add a border when the mouse is over them  One of the  lt div gt s contains a  lt form gt  which  using jQuery  will keep the border if an input within it has focus  This works perfectly except that IE6 does not support  hover on any elements other than  lt a gt s  So  for this browser only we are using jQuery to mimic CSS  hover using the    element  hover   method  The only problem is  now that jQuery handles both the form focus   and hover    when an input has focus then the user moves the mouse in and out  the border goes away   I was thinking we could use some kind of conditional to stop this behavior  For instance  if we tested on mouse out if any of the inputs had focus  we could stop the border from going away  AFAIK  there is no  focus selector in jQuery  so I m not sure how to make this happen  Any ideas

User · Answer

Have you thought about using mouseOver and mouseOut to simulate this  Also look into mouseEnter and mouseLeave

User · Answer

April 2015 Update  Since this question has been around a while  and some new conventions have come into play  I feel that I should mention the  live method has been depreciated   In its place  the  on method has now been introduced   Their documentation is quite useful in explaining how it works      The  on   method attaches event handlers to the currently selected set   of elements in the jQuery object  As of jQuery 1 7  the  on   method   provides all functionality required for attaching event handlers  For   help in converting from older jQuery event methods  see  bind        delegate    and  live      So  in order for you to target the  input focused  event  you can use this in a script  Something like      input   on  focus   function         do some stuff       This is quite robust and even allows you to use the TAB key as well

User · Answer

Here   s a more robust answer than the currently accepted one   jQuery expr      focus   function elem      return elem     document activeElement  amp  amp   elem type    elem href        Note that the  elem type    elem href  test was added to filter out false positives like body  This way  we make sure to filter out all elements except form controls and hyperlinks    Taken from this gist by Ben Alman

User · Answer

I m not entirely sure what you re after but this sounds like it can be achieved by storing the state of the input elements  or the div   as a variable      div   each function         var childInputHasFocus   false         this  hover function            if  childInputHasFocus                   do something           else            function             if  childInputHasFocus                   do something           else                     input   this           focus function                childInputHasFocus   true                      blur function                childInputHasFocus   false

User · Answer

There is a plugin to check if an element is focused  http   plugins jquery com project focused     input   each function       if    this       focused              this  addClass  focused

User · Answer

As far as I know  you can t ask the browser if any input on the screen has focus  you have to set up some sort of focus tracking     I usually have a variable called  noFocus  and set it to true   Then I add a focus event to all inputs that makes noFocus false   Then I add a blur event to all inputs that set noFocus back to true   I have a MooTools class that handles this quite easily  I m sure you could create a jquery plugin to do the same   Once that s created  you could do check noFocus before doing any border swapping

User · Answer

There is no  focus  but there is  selected http   docs jquery com Selectors selected  but if you want to change how things look based on what is selected you should probably be working with the blur events   http   docs jquery com Events blur

User · Answer

I had a  live  focus   event set to select    highlight  the contents of a text input so that the user wouldn t have to select it before typing a new value      formObj  select     Because of quirks between different browsers  the select would sometimes be superseded by the click that caused it  and it would deselect the contents right after in favor of placing the cursor within the text field  worked mostly ok in FF but failed in IE   I thought I could solve this by putting a slight delay on the select     setTimeout function     formObj  select     200    This worked fine and the select would persist  but a funny problem arose   If you tabbed from one field to the next  the focus would switch to the next field before the select took place   Since select steals focus  the focus would then go back and trigger a new  focus  event   This ended up in a cascade of input selects dancing all over the screen   A workable solution would be to check that the field still has focus before executing the select    but as mentioned  there s no simple way to check     I ended up just dispensing with the whole auto highlight  rather than turning what should be a single jQuery select   call into a huge function laden with subroutines

User · Answer

if anyone cares there is a much better way to capture focus now    foo  focus       http   api jquery com focus

User · Answer

Simple    lt input type  text    gt        lt script gt          input   focusin function          alert  I am in Focus                lt  script gt

User · Answer

CSS    focus       border-color red      JQuery       document  ready function             input   blur function                input   removeClass  focus                    focus function               this  addClass  focus

User · Answer

Keep track of both states  hovered  focused  as true false flags  and whenever one changes  run a function that removes border if both are false  otherwise shows border   So  onfocus sets focused   true  onblur sets focused   false  onmouseover sets hovered   true  onmouseout sets hovered   false  After each of these events run a function that adds removes border

User · Answer

An alternative to using classes to mark the state of an element is the internal data store functionality   P S   You are able to store booleans and whatever you desire using the data   function  It s not just about strings              mouseover function             store state on element    mouseout function             remove stored state on element       And then it s just a matter of accessing the state of elements

User · Answer

jQuery 1 6   jQuery added a  focus selector so we no longer need to add it ourselves  Just use         is   focus    jQuery 1 5 and below  Edit  As times change  we find better methods for testing focus  the new favorite is this gist from Ben Alman   jQuery expr      focus   function  elem       return elem     document activeElement  amp  amp    elem type    elem href         Quoted from Mathias Bynens here      Note that the  elem type    elem href  test was added to filter out false positives like body  This way  we make sure to filter out all elements except form controls and hyperlinks    You re defining a new selector  See Plugins Authoring  Then you can do   if           is   focus                or      input focus   doStuff      Any jQuery  If you just want to figure out which element has focus  you can use     document activeElement    If you aren t sure if the version will be 1 6 or lower  you can add the  focus selector if it is missing    function             var filters     expr           if    filters focus              filters focus   function  elem                return elem     document activeElement  amp  amp    elem type    elem href                         jQuery

User · Answer

What I wound up doing is creating an arbitrary class called  elementhasfocus which is added and removed within the jQuery focus   function  When the hover   function runs on mouse out  it checks for  elementhasfocus   if      quotebox   is   boxhasfocus      this  removeClass  box border      So if it doesn t have that class  read  no elements within the div have focus  the border is removed  Otherwise  nothing happens

[javascript] Using jQuery to test if an input has focus

Examples related to javascript

Examples related to jquery

Examples related to javascript-events

Examples related to jquery-on