Javascript to detect if user changes tab

Question

I am writing a webpage for online quiz. The basic requirement I have is that it must fire an event(stopping the quiz) if the user changes tabs or opens a news window even without minimizing their browser, i.e if the person is attempting to see the answer from some other window/tab. How can I do that?

Note : Try to avoid including a bleeding edge HTML5 feature in your answer because I want the feature to be supported by all major browsers currently.

Solution 1

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

Solution 2

In 2022 you can use an event listener with the visibilitychange event:

document.addEventListener("visibilitychange", (event) => {
  if (document.visibilityState == "visible") {
    console.log("tab is active")
  } else {
    console.log("tab is inactive")
  }
});

Solution 3

If you are targeting browsers that support it, you can use the Page Visibility API available in HTML5. It doesn't directly detect tab changes, per-say, but visibility changes. Which would include (but not limited to) tab changes.

See https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API

Solution 4

Best native function hands down, no jQuery.

document.hasFocus

Check the pen, check what happens when you go to the link and back to the codepen tab.

https://codepen.io/damianocel/pen/Yxxzdj

Solution 5

With jQuery:

$(window).on('focus', function () {
});
$(window).on('blur', function () {
});

$().focus & $().blur are deprecated.

View more solutions

Comments

[Matt]

Would also fire for just losing focus on the window, but the window is still visible.

[Maxsteel]

Will it be able to detect if the user launches new window/browser without minimizing quiz window?

[Kristian]

If a new popup occurs, there will be a loss in focus to the current window, wouldn't there?

[scunliffe]

This is a handy API however it should be noted that at this time (March 6, 2015) there are some limitations: Alt + Tab (e.g. app switching on of any kind) doesn't register on Windows for Firefox/Chrome/IE10. Switching tabs within each browser does work just fine though. On iOS though app switching or device locking does trigger a visibility change.

[Eric Uldall]

you also get a false positive when clicking on an iframe in that page.

[Umair Mohammad]

Seems to work for me in Opera, FireFox, Safari and Chrome. Haven't tested in others.

[binarydreams]

This demo checks for visibility every 200ms and is not ideal in terms of battery use. The Visibility API is event based and works down to IE10 and even on mobile, so I would strongly recommend you use that.

[BluePie]

has good browser support

[katmanco]

greate and simple

[shieldgenerator7]

non-jQuery version: stackoverflow.com/a/69509921/2336212

[Kamil Bęben]

This has the advantage over 'visibilitychange' event that it is triggerred after browser's window gained / lost focus while 'visibilitychange' works only on tab switching