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
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
Checking if the document has focus
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.
<p id="log">Focus check results are shown here.</p> <button id="newWindow">Open new window</button> 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); Specifications
| Specification |
|---|
| HTML # dom-document-hasfocus-dev |
Browser compatibility
Loading…