:focus Selector
Categories: Form | Basic Filter
jQuery(':focus')
Description: Selects element if it is currently focused.
-
jQuery(':focus')
version added: 1.0
As with other pseudo-class selectors (those that begin with a ":"), it is recommended to precede :focus
with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':focus')
is equivalent to $('*:focus')
. If you are looking for the currently focused element, $( document.activeElement )
will retrieve it without having to search the whole DOM tree.
-
Adds the focused class to whatever element has focus
HTML:
<div id="content"> <input tabIndex="1"> <input tabIndex="2"> <select tabIndex="3"> <option>select menu</option> </select> <div tabIndex="4"> a div </div> </div>
CSS:
.focused { background: #abcdef; }
Code:
$( "#content" ).delegate( "*", "focus blur", function( event ) { var elem = $( this ); setTimeout(function() { elem.toggleClass( "focused", elem.is( ":focus" ) ); }, 0); });