If you are looking for a way to check if users are focusing on your website, this article is for you. This article has a very easy-to-understand tutorial on how to detect if a Browser tab has Focus using JavaScript.
Detect if a Browser tab has Focus using JavaScript
There are many ways to check if a user has focused on a tab. Some of them are:
Using the visibilitychange event
The visibilitychange event helps us to track when the document (current window) is visible or hidden.
Syntax:
onvisibilitychange = func;
Description:
When visibility changes, func will be executed.
Accompanying this event is visibilityState. We can get information on the visibilitychange event from visibilityState.
To detect whether the user has focused on the tab or not is very simple. If visibilityState returns ‘visible‘, the tab is in Focus. Or if visibilityState returns ‘hidden‘, the tab is not in Focus.
Take a look at the example below to understand.
function detectFocus() {
// Using document.visibilityState
let state = document.visibilityState;
if (state === "visible") {
// if focus -> show check mark on title
document.title = "✔️ tab is being focused";
} else {
// if does not focus -> show exclamation on title
document.title = "❗ tab is not focused";
}
}
// When visibility changes, detectFocus is executed
document.onvisibilitychange = detectFocus;Output:
Using the hidden property
Syntax:
document.hidden
Description:
The hidden property will return true if your current document is hidden. Otherwise, return false.
Similar to visibilityState, we also use document.hidden in conjunction with visibilitychange event.
To detect if a browser tab has Focus, check if the hidden property returns true or false. If true means the user is not focused on the tab. If false means the user is focused on the tab. Like this:
function detectFocus() {
// Using document.hidden property
let isHidden= document.hidden;
if (isHidden) {
// if true -> tab is not focused
document.title = "❗ tab is not focused";
} else {
// if false -> tab is focused
document.title = "✔️ tab is being focused";
}
}
// When visibility changes, detectFocus is executed
document.onvisibilitychange = detectFocus;Output:
Using the blur/focus events
The blur event occurs when an element is no longer in Focus.
Blur event syntax:
onblur = func;
Description:
When a blur event occurs, func will be executed.
The focus event occurs when an element is in Focus.
Focus event syntax:
onfocus = func;
Description:
When a focus event occurs, func will be executed.
The window object provides the above two events that make it easy to check if the user is focusing on the current tab or not. This approach is the simplest way for beginners. Take a look at the example below to see how simple it is.
// Using blur event in the window object
window.onblur = function () {
document.title = "❗ tab is on blur";
};
// Using focus event in the window object
window.onfocus = function () {
document.title = "✔️ tab is on focus";
};Output:
Summary
Congratulations! You have just learned about how to detect if a Browser tab has Focus using JavaScript. We believe that the knowledge in this article will help you a lot in your journey to become a web developer.
Regularly visit LearnShareIT to update the latest IT knowledge!
Maybe you are interested:
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java