: Focus

As with other pseudo-class selectors (those starting with ":"), it is recommended that the focus is preceded by a tag name or other selection; otherwise, universal selection ("*") is self-evident. In other words, $ (': Focus ') equals $ (' *:focus '). If you are looking for the current focus element, $ (document.activeelement) will be retrieved without having to search the entire DOM tree.

Describe:

Add a "focused" class name to the elements that have the focus method

CSS code:

. focused {
Background: #abcdef;
}

HTML code:

<div id= "Content" >
<input tabindex= "1" >
<input tabindex= "2" >
<select tabindex= "3" >
<option>select menu</option>
</select>
<div tabindex= "4" >
A Div
</div>
</div>

JQuery Code:

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

: Focus