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