: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

Looking for a Web Developer?

πŸ‘‹

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)