Check if an element is focused

Compare the element with document.activeElement.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function hasFocus(element) { return element === document.activeElement; }

Usage

Markup

<label>Email <input id="email" type="email"></label>
<button id="submit">Subscribe</button>

Script

const email = document.querySelector('#email');
email.focus();
hasFocus(email); // → true
hasFocus(document.querySelector('#submit')); // → false

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

Know the limits

• Inside shadow DOM, document.activeElement is the shadow host; element.matches(":focus") checks the element itself.
• activeElement stays set while the window is in the background; document.hasFocus() says whether the page itself has focus.

The function above is the code the usage lines run. It does not validate its arguments; add checks where it receives untrusted input.

Keep exploring

• Check if a given DOMRect is contained within another DOMRect — True when the target lies inside the container or on its edges.
• Check if two DOMRects intersect — Two rects intersect when they meet on both axes.
• Compare two DOMRects for size and position match — Compare x, y, width and height exactly.