Document: hasFocus() method - Web APIs | MDN
Syntax
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.
html
<p id="log">Focus check results are shown here.</p>
<button id="newWindow">Open new window</button>
body {
padding: 1rem;
background: gray;
text-align: center;
font: 1.5rem sans-serif;
}
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);
Specifications
| Specification |
|---|
| HTML # dom-document-hasfocus-dev |