Using jQuery to test if an input has focus

by

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 );

More Related Contents:

  1. Javascript: function doesnt work even though condition is met (hard for me to explain)
  2. jQuery.click() vs onClick
  3. Check if an image is loaded (no errors) with jQuery
  4. jQuery $(document).ready and UpdatePanels?
  5. How to debug JavaScript / jQuery event bindings with Firebug or similar tools?
  6. Getting value of select (dropdown) before change
  7. jQuery click events firing multiple times
  8. How can I detect pressing Enter on the keyboard using jQuery?
  9. What is the difference between the mouseover and mouseenter events?
  10. Long Press in JavaScript?
  11. Event when user stops scrolling
  12. How to detect online/offline event cross-browser?
  13. jQuery scroll() detect when user stops scrolling
  14. How to differentiate single click event and double click event?
  15. Detect multiple keys on single keypress event in jQuery
  16. Fire jQuery event on div change
  17. How to bind Events on Ajax loaded Content?
  18. Event delegation vs direct binding when adding complex elements to a page
  19. HTML5 dragleave fired when hovering a child element
  20. Detect Close windows event by jQuery
  21. window.resize event firing in Internet Explorer
  22. jQuery change event on not firing in IE
  23. How to detect if the user clicked the “back” button
  24. jQuery event that triggers after CSS is loaded?
  25. Drop event not firing in chrome
  26. Prevent firing focus event when clicking on div
  27. Catch scrolling event on overflow:hidden element
  28. Trigger for span text/html on changed
  29. Cancel click event in the mouseup event handler
  30. Is My Page Being Loaded from the Browser Cache?

Leave a Comment