JavaScript Document hasFocus() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word HASFOCUS

Definition

document.hasFocus() returns a boolean: true if the document (or any element inside it) has focus, otherwise false (MDN). It takes no parameters.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.hasFocus. Start with this line.

JavaScript
document.hasFocus()
CallWhat it does
document.hasFocus()Primary signature.
document.hasFocus(...)Call with the arguments your case needs.

Built into the browser. Call hasFocus(...) on document — no import required.

Library declarations
JavaScript
document.hasFocus()

Parameters

ParameterDescription
Typical checkOptional. Pause work when the document loses focus

Return Value

Return ValueDescription
*true or false (MDN)

JavaScript Examples

Example 1 — Read the Boolean

Call hasFocus() and log the result.

JavaScript
const focused = document.hasFocus();

console.log(focused);        // true or false
console.log(typeof focused); // "boolean"
Try It Yourself

How It Works

  1. Call with no args. MDN: hasFocus() takes no parameters.
  2. Get a boolean. true if the document/active element has focus.
  3. Type check. Result is always a boolean, never a string.
  4. Context matters. In a focused try-it iframe you often see true.

Example 2 — Focus Status Message

MDN-style branch: show different text when the document has or lacks focus.

JavaScript
function checkDocumentFocus() {
  if (document.hasFocus()) {
    return "This document has focus.";
  }
  return "This document does not have focus.";
}

console.log(checkDocumentFocus());
Try It Yourself

How It Works

  1. Wrap the check. A small function keeps the MDN pattern reusable.
  2. Branch on the boolean. true → focused message; false → not focused.
  3. Update UI from it. MDN updates a log paragraph the same way.
  4. Re-check later. Call again after the user switches windows/tabs.

Example 3 — Focus vs Page Visibility

Focus and visibility answer different questions — log both.

JavaScript
console.log("hasFocus:", document.hasFocus());
console.log("visibilityState:", document.visibilityState);
console.log("hidden:", document.hidden);
Try It Yourself

How It Works

  1. Focus first. hasFocus() = keyboard/UI focus for this document.
  2. Visibility second. visibilityState / hidden = is the page visible?
  3. They can differ. A visible page can still lack focus (another window on top).
  4. Pick the right API. Pause sound on hidden tabs; pause typing shortcuts when unfocused.
Compatibility

Browser Support

Document.hasFocus() is Baseline Widely available on MDN (since July 2015). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline Widely available

Document.hasFocus()

Boolean document-focus check across all major browsers.

Baseline Widely available
Google Chrome Supported
Yes
Mozilla Firefox Supported
Yes
Apple Safari Supported
Yes
Microsoft Edge Supported
Yes
Opera Supported
Yes
Internet Explorer Supported (legacy)
Yes
hasFocus() Wide

Bottom line: Safe for focus-aware UI. Pair with activeElement for which node is active, and with Page Visibility for background tabs. See the MDN Document.hasFocus() reference.

Frequently Asked Questions

MDN: Document.hasFocus() returns a boolean indicating whether the document or any element inside the document has focus. It can determine whether the active element in a document has focus.
No. MDN marks Document.hasFocus() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
false if the active element in the document has no focus; true if the active element in the document has focus (MDN).
No. MDN: an element with focus is always the active element, but an active element does not necessarily have focus — for example in a popup that is not the foreground.
hasFocus() answers whether this document has keyboard/UI focus. Page Visibility (visibilityState / hidden) answers whether the page is visible (for example, not in a background tab). They are related but not identical.
No. MDN: hasFocus() takes no parameters.

Next: hasPrivateToken()

Learn how document.hasPrivateToken() checks for a private state token.

hasPrivateToken() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document getSelection() Method JavaScript Document hasPrivateToken() Method