JavaScript to Detect If User Changes Tab

Javascript to detect if user changes tab

You can determine if a tab or window is active by attaching a blur / focus event listener to window.

in jQuery it would be

$(window).focus(function() {
    //do something
});

$(window).blur(function() {
    //do something
});

quoted from this SO answer: https://stackoverflow.com/a/1760268/680578

Detect if browser tab is active or user has switched away

Now we can use the visibility API.

To deal with the different browser-specific syntaxes, I made this small code :

var vis = (function(){
    var stateKey, eventKey, keys = {
        hidden: "visibilitychange",
        webkitHidden: "webkitvisibilitychange",
        mozHidden: "mozvisibilitychange",
        msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function(c) {
        if (c) document.addEventListener(eventKey, c);
        return !document[stateKey];
    }
})();

Usage :

var visible = vis(); // gives current state

vis(aFunction);      // registers a handler for visibility changes

Example :

vis(function(){
  document.title = vis() ? 'Visible' : 'Not visible';
});

Demonstration page

Detect change of browser tabs with javascript

Trap the window.onblur event.

It's raised whenever the current window (or tab) loses focus.

Detect if user switched tab or minimized browser window and handle them separately

You cannot. Javascript stays within the page in the browser and doesn't interact with the browser features. Switching tabs and minimizing are browser features and not a webpage feature. Unless you have a browser that sends this event information to the webpage, which is very unlikely given the security issues, there is no solution for this as of today.

How to determine whether the user has switched to another tab of the current browser

this might work, but will popup when the user leaves th esite in anyway not just tab changes

window.onunload = popup;

function popup() {
  alert('tab changed');
}

How do I detect the event when tab on an input?

You can use the focus event to detect focus in Javascript:

<input type="text" onfocus={focusinhandler} onfocusout={focusouthandler} />

If your goal is to changing styling, you can use the :focus selector in CSS:

.input-group-text.iconify:focus {
    // Colour Change
}

which is applied when an element gains focus.

Is it possible to detect when a user switches to a different browser tab?

Apparently in Firefox it'll work for tab switching if you use document.onBlur instead of window.onblur for the event handler.

---

Related Topics