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.

Well certainly change in tab can be detected by using Javascript as far as i know.What i wanted to know is, if the change in focus of the window like opening a new browser can be detected! — Maxsteel, Apr 26 '12 at 17:52

score 80 · Accepted Answer · edited May 23 '17 at 12:10

80

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

edited May 23 '17 at 12:10

Community

1
1

answered Apr 26 '12 at 17:52

Kristian

20,416
18
93
168

3

Would also fire for just losing focus on the window, but the window is still visible. – Matt Apr 26 '12 at 17:53
2

Will it be able to detect if the user launches new window/browser without minimizing quiz window? – Maxsteel Apr 26 '12 at 18:03
If a new popup occurs, there will be a loss in focus to the current window, wouldn't there? – Kristian Apr 26 '12 at 18:06
4

you also get a false positive when clicking on an iframe in that page. – Eric Uldall Apr 22 '15 at 21:50
non-jQuery version: https://stackoverflow.com/a/69509921/2336212 – shieldgenerator7 Oct 09 '21 at 19:53

score 53 · Answer 2 · edited Jan 27 '22 at 19:40

53

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")
  }
});

edited Jan 27 '22 at 19:40

UnrealApex

438
6
14

answered Sep 01 '20 at 20:44

Bart Blast

639
5
4

score 36 · Answer 3 · answered Apr 26 '12 at 17:52

36

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

answered Apr 26 '12 at 17:52

Matt

40,178
28
107
146

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. – scunliffe Mar 06 '15 at 15:45

score 29 · Answer 4 · answered Aug 11 '17 at 15:03

29

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

answered Aug 11 '17 at 15:03

ptts

982
7
16

2

Seems to work for me in Opera, FireFox, Safari and Chrome. Haven't tested in others. – Umair Mohammad Mar 06 '18 at 13:35
4

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. – Richard Szalay Apr 16 '19 at 05:26
[has good browser support](https://caniuse.com/#search=hasFocus) – BluePie Sep 03 '20 at 23:55
greate and simple – katmanco Nov 04 '20 at 12:50

score 5 · Answer 5 · answered Dec 21 '18 at 13:26

5

With jQuery:

$(window).on('focus', function () {

});

$(window).on('blur', function () {

});

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

answered Dec 21 '18 at 13:26

472084

17,405
10
60
80

score 3 · Answer 6 · answered Oct 09 '21 at 19:25

3

window onfocus and onblur work just fine:

window.onfocus = function (ev) {
    console.log("gained focus");
};

window.onblur = function (ev) {
    console.log("lost focus");
};

answered Oct 09 '21 at 19:25

shieldgenerator7

1,267
16
22

1

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 – Kamil Bęben Mar 25 '22 at 15:14

Sadequs Haque · Answer 7 · 2021-01-23T19:17:19.547

1

Working on a similar project. This worked the best. On the highest level component which wouldn't normally rerender, add:

  setInterval( checkFocus, 200 );

  function checkFocus(){
    if(document.hasFocus()==false){
      //Do some checking and raise a red flag if this runs during an exam.
    }
  }

edited Jan 23 '21 at 19:17

answered Jan 17 '21 at 16:44

Sadequs Haque

150
10

score 0 · Answer 8 · answered Jul 30 '21 at 07:37

I needed something like this and it seems this behavior is slightly different on each browser.

    if (document.hidden !== undefined) { // Opera 12.10 and Firefox 18 and later support     
      visibilityChange = "visibilitychange";
    } else if (document.mozHidden !== undefined) {      
      visibilityChange = "mozvisibilitychange";
    } else if (document.msHidden !== undefined) {      
      visibilityChange = "msvisibilitychange";
    } else if (document.webkitHidden !== undefined) {      
      visibilityChange = "webkitvisibilitychange";
    } else if (document.oHidden !== undefined) {      
      visibilityChange = "ovisibilitychange";
    }
    
    document.addEventListener(visibilityChange, function(event) {
      handleVisibilityChange();
    }, false);

I have an example you can check: https://jsfiddle.net/jenol/4g1k80jq/33/

Javascript to detect if user changes tab

8 Answers8

Linked