Document: hasFocus() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The hasFocus() method of the Document interface returns a boolean value indicating whether the document or any element inside the document has focus. This method can be used to determine whether the active element in a document has focus.

Note: When viewing a document, an element with focus is always the active element in the document, but an active element does not necessarily have focus. For example, an active element within a popup window that is not the foreground doesn't have focus.

Syntax

js
hasFocus()

Parameters

None.

Return value

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

Examples

The following example checks whether the document has focus or not. A function called checkPageFocus() updates a paragraph element depending on the result of document.hasFocus(). Opening a new window will cause the document to lose focus and switching back to the original window will cause the document to regain focus.

HTML

html
<p id="log">Focus check results are shown here.</p>
<button id="newWindow">Open new window</button>

JavaScript

js
const body = document.querySelector("body");
const log = document.getElementById("log");

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";
  }
}

function openWindow() {
  window.open(
    "https://developer.mozilla.org/",
    "MDN",
    "width=640,height=320,left=150,top=150",
  );
}

document.getElementById("newWindow").addEventListener("click", openWindow);
setInterval(checkDocumentFocus, 300);

Result

Specifications

Specification
HTML
# dom-document-hasfocus-dev

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hasFocus

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

See also