:focus Selector
Selects element if it is currently focused.
.focus()
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
JS
<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;
}
HTML
$("#content").delegate("*", "focus blur", function () {
var elem = $(this);
setTimeout(function () {
elem.toggleClass("focused", elem.is(":focus"));
}, 0);
});
DEMO