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
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
<p id="log">Focus check results are shown here.</p>
<button id="newWindow">Open new window</button>
JavaScript
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 Standard # dom-document-hasfocus-dev |
Browser compatibility
BCD tables only load in the browser