JavaScript Document hasFocus() Method

What You’ll Learn

document.hasFocus() is an instance method that returns a boolean: does this document (or something inside it) currently have focus? (see MDN Document: hasFocus()). Learn how it relates to activeElement, window switching, and five try-it labs.

Introduction

When a user clicks into your page, tabs away, or opens another window, keyboard focus moves. document.hasFocus() answers a simple question: does this document have focus right now?

MDN: the method returns a boolean indicating whether the document or any element inside the document has focus. You can use it to determine whether the active element in a document has focus.

Related tutorials: getSelection(), getElementById(), hasPrivateToken().

Understanding document.hasFocus()

An instance method on the Document interface (MDN). It takes no arguments and returns a boolean about document focus.

• No parameters — call it with empty parentheses (MDN).
• Returns true — the active element in the document has focus (MDN).
• Returns false — the active element in the document has no focus (MDN).
• Scope — document itself or any element inside can provide focus (MDN).
• Related — pair with Document.activeElement and the Page Visibility API (MDN See also).
• Not selection — highlighted text is getSelection(), not focus.

📝 Syntax

General form of Document.hasFocus (MDN):

hasFocus()

Parameters

None (MDN).

Return value

false if the active element in the document has no focus; true if the active element in the document has focus (MDN).

MDN quick sample

if (document.hasFocus()) {
  console.log("This document has focus.");
} else {
  console.log("This document does not have focus.");
}

⚖️ hasFocus vs activeElement vs visibility

Examples Gallery

Examples follow MDN Document: hasFocus() and practical focus patterns.

const focused = document.hasFocus();
console.log(focused ? "This document has focus." : "This document does not have focus.");

This document has focus.
(or the opposite if the window is not focused)

function checkDocumentFocus() {
  if (document.hasFocus()) {
    log.textContent = "This document has focus.";
    body.style.background = "white";
  } else {
    log.textContent = "This document does not have focus.";
    body.style.background = "gray";
  }
}

setInterval(checkDocumentFocus, 300);

This document has focus.
— then after switching away —
This document does not have focus.

function report() {
  console.log("hasFocus:", document.hasFocus());
}

window.addEventListener("focus", report);
window.addEventListener("blur", report);
report();

hasFocus: true
hasFocus: false
hasFocus: true

const active = document.activeElement;
console.log("hasFocus:", document.hasFocus());
console.log("activeElement:", active && active.tagName);

hasFocus: true
activeElement: BUTTON

console.log({
  hasFocus: document.hasFocus(),
  visibilityState: document.visibilityState,
  hidden: document.hidden,
});

{
  hasFocus: true,
  visibilityState: "visible",
  hidden: false
}

🚀 Common Use Cases

• Pause animations — stop heavy work when the window loses focus.
• Live status badges — MDN-style “focused / not focused” indicators.
• Autosave / drafts — flush edits when the user switches away.
• Multi-window tools — detect which document is in the foreground.
• With activeElement — know both which control is active and if it has focus (MDN).
• With visibility — combine tab visibility and focus for richer lifecycle logic.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• MDN: returns a boolean about whether the active element has focus.
• MDN: focused element is always active, but active does not always mean focused.
• MDN See also: Document.activeElement and the Page Visibility API.
• Opening another window typically makes hasFocus() return false (MDN demo).
• Related: getSelection(), getElementById(), hasPrivateToken().

💡 Best Practices