Using jQuery to test if an input has focus

Question

On the front page of a site I am building, several <div>s use the CSS :hover pseudo-class to add a border when the mouse is over them. One of the <div>s contains a <form> 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 <a>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?

Answer 1

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 && ( 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 && ( elem.type || elem.href );         };     } })( jQuery ); 

Answer 2

CSS:

.focus {     border-color:red; } 

JQuery:

  $(document).ready(function() {      $('input').blur(function() {         $('input').removeClass("focus");       })       .focus(function() {         $(this).addClass("focus")       });   });