Warning: session_start(): open(/tmp/sess_4b1bec22370e8705e51f4965ea1f0b80, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Detect If A Browser Tab Has Focus Using JavaScript? - LearnShareIT

How To Detect If A Browser Tab Has Focus Using JavaScript?

Detect if a Browser tab has Focus using JavaScript

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:

Leave a Reply

Your email address will not be published. Required fields are marked *