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.
js
hasFocus()
None.
false if the active element in the document has no focus; true if the active element in 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>
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);
| Specification |
|---|
| HTML Standard # dom-document-hasfocus-dev |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
hasFocus |
2 | 12 | 3 | 5.5 | 15 | 4 | ≤37 | 18 | 4 | 14 | 3.2 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus