Categories

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