Detect tab changes in the browser: JavaScript Blur & Focus

Detect tab changes in the browser: JavaScript Blur & Focus Thumbnail
Published on 30. July 2020

By detecting the tab change in the browser you can conjure up some cool functions. And you can find out how to do this here!

Advertisement

There are some features where it can be useful to be able to see the tab change of a visitor. These include limiting background activity and playing an animation on your website.

A nice feature that you can build by detecting the tab change is also this one:

Display a different tab title when switching tabs (demo function)
Display a different tab title when switching tabs (demo function)

The page title can be changed as desired and can display funny or helpful information. A little gimmick that can provide that special something and can also lead to some people being surprised.

Besides a fun effect, changing the page title can also attract the user’s attention to your page (again). If the user is inclined to leave the page, he can be “pulled” back to your page with a funny, nice or helpful hint.

Other useful applications

If you perform complex calculations with JavaScript, this will put a strain on your visitors’ browsers. But since we know when a visitor is on the tab of our website and when not, we can pause the calculations in the corresponding time period, as long as this does not affect the expected result.

Advertisement

By limiting these background activities, especially users with weaker computers or smartphones can be relieved.

There is (almost) always potential for optimization: With these Code Snippets for WordPress you can still tune your page properly!

Another field of application is the playing of an animation. If your visitor (luckily for you) returns to your site, you could greet him with a great animation. Of course, you should keep everything within limits so that it doesn’t get out of hand.

For serious sites this might be less appropriate… but if you want to prove your skills or it just fits to the theme of the site, why not!

Detect tab changes with JavaScript

To detect the tab change we use pure JavaScript without jQuery etc. Everything you need is hidden in this code.

If you want to switch from jQuery to pure JavaScript, this offers some advantages and you can still use all the great features. 🙂

Advertisement

We register the blur event on the global document variable. Generally, the blur and focus events are often used in conjunction.

The blur event is triggered when an element or the entire tab (document) loses focus, i.e. when we no longer access it. In contrast, the focus event is triggered when an element or the tab (document) is refocused, i.e. in our case it is back on the tab.

// user leaves the tab
document.addEventListener('blur', (e) => {
  // your custom code here
});

// user enters the tab (again)
document.addEventListener('focus', (e) => {
  // your custom code here
});

The required code is already complete. Not hard at all, is it? 🙂

More about blur and focus can be found in the MDN web docs.

By the way: The demo shown at the beginning can be easily implemented with this code:

let siteTitle = '';
window.addEventListener('blur', () => {
  siteTitle = document.title;
  document.title = 'Come back! :c';
});

window.addEventListener('focus', () => {
  document.title = siteTitle;
});

Always Happy coding!

Related Posts
NEW 🚀
Leave a comment

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