jQuery & jQuery UI Documentation

jQuery & jQuery UI

:focus selector

focus selector

version added: 1.6jQuery(':focus')

Description: Selects element if it is currently focused.

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.

Example:

Adds the focused class to whatever element has focus

<!DOCTYPE html>
<html>
<head>
  <style>
.focused {
    background: #abcdef;
}
</style>
  <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
  
<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu</option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>

<script>
$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});
</script>

</body>
</html>