JavaScript document.hasFocus
last modified April 2, 2025
In this article, we explore the document.hasFocus() method in
JavaScript. This method checks if the document or any element inside it has
focus, which is useful for improving user experience and accessibility.
Basic Definition
The document.hasFocus() method returns a Boolean value indicating
whether the document or any element inside it currently has focus. This helps
determine if the user is actively interacting with the page.
When the document has focus, it means the user's attention is on the page. This is particularly useful for applications that need to pause animations or notifications when the user switches to another tab or window.
Basic hasFocus Check
This example demonstrates how to perform a basic focus check on the document.
<!DOCTYPE html>
<html>
<head>
<title>Basic hasFocus Check</title>
</head>
<body>
<button onclick="checkFocus()">Check Focus</button>
<p id="result"></p>
<script>
function checkFocus() {
const hasFocus = document.hasFocus();
document.getElementById('result').textContent =
`Document has focus: ${hasFocus}`;
}
</script>
</body>
</html>
In this basic example, clicking the button calls checkFocus() which
uses document.hasFocus() to check if the document has focus. The
result is displayed in the paragraph element.
This demonstrates the simplest way to use hasFocus(). The method
returns true if the document is focused and false
otherwise.
Window Focus Event
This example shows how to detect when the window gains or loses focus.
<!DOCTYPE html>
<html>
<head>
<title>Window Focus Event</title>
</head>
<body>
<p id="status">Window is focused</p>
<script>
window.addEventListener('focus', function() {
document.getElementById('status').textContent =
'Window is focused';
});
window.addEventListener('blur', function() {
document.getElementById('status').textContent =
'Window lost focus';
});
</script>
</body>
</html>
Here we use the focus and blur events on the window
object to track when the window gains or loses focus. The status is displayed
in a paragraph element.
While not using hasFocus() directly, this shows related focus
management. These events can be combined with hasFocus() for more
complex focus tracking.
Pausing Animation on Blur
This example demonstrates how to pause an animation when the window loses focus.
<!DOCTYPE html>
<html>
<head>
<title>Pause Animation on Blur</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 2s infinite alternate;
}
@keyframes move {
from { left: 0; }
to { left: 200px; }
}
</style>
</head>
<body>
<div id="box"></div>
<script>
const box = document.getElementById('box');
let animationPaused = false;
window.addEventListener('blur', function() {
box.style.animationPlayState = 'paused';
animationPaused = true;
});
window.addEventListener('focus', function() {
if (animationPaused) {
box.style.animationPlayState = 'running';
animationPaused = false;
}
});
</script>
</body>
</html>
In this example, a red box animates back and forth. When the window loses focus, the animation pauses. It resumes when the window regains focus.
This demonstrates a practical use case for focus detection. Pausing animations when the user isn't looking at the page can improve performance and user experience.
Focus-Based Notification
This example shows how to display a notification when the window regains focus.
<!DOCTYPE html>
<html>
<head>
<title>Focus Notification</title>
</head>
<body>
<div id="notification" style="display: none;">
Welcome back!
</div>
<script>
let lastBlurTime = null;
window.addEventListener('blur', function() {
lastBlurTime = new Date();
});
window.addEventListener('focus', function() {
if (lastBlurTime) {
const timeAway = Math.floor(
(new Date() - lastBlurTime) / 1000
);
const notification = document.getElementById('notification');
notification.textContent = `Welcome back! You were away for ${timeAway} seconds.`;
notification.style.display = 'block';
setTimeout(() => {
notification.style.display = 'none';
}, 3000);
}
});
</script>
</body>
</html>
Here we track when the window loses focus and display a welcome back message with the duration of absence when it regains focus. The notification disappears after 3 seconds.
This shows how focus detection can be used to create user-friendly features.
The example combines blur and focus events with
timing calculations.
Real-Time Focus Monitoring
This example demonstrates continuous focus monitoring using hasFocus().
<!DOCTYPE html>
<html>
<head>
<title>Real-Time Focus Monitor</title>
</head>
<body>
<p id="status">Checking focus...</p>
<script>
function updateFocusStatus() {
const hasFocus = document.hasFocus();
document.getElementById('status').textContent =
`Document ${hasFocus ? 'has' : 'does not have'} focus`;
}
// Check focus initially
updateFocusStatus();
// Set up periodic checking
setInterval(updateFocusStatus, 1000);
// Also update on focus/blur events
window.addEventListener('focus', updateFocusStatus);
window.addEventListener('blur', updateFocusStatus);
</script>
</body>
</html>
This example continuously monitors document focus status. It checks focus every second and also updates immediately when focus changes via event listeners.
This demonstrates a comprehensive approach to focus monitoring. The combination of periodic checks and event listeners ensures accurate and responsive focus tracking.
Source
In this article, we have shown how to use document.hasFocus()
in JavaScript. This method is valuable for creating responsive web
applications that adapt to user attention.
Author
List all JS DOM tutorials.