2

How I can detect when user focus in this tab and when user unfocus current tab I'm trying this code:

window.onfocus = function() {
    alert('Got focus');
}

Why this not work?

PRVS
  • 1,612
  • 4
  • 38
  • 75
Nick
  • 45
  • 1
  • 4
  • With tab you mean to an HTML element? Are you using a component library?. Or with tab you mean the browser's tab? – José María Feb 01 '16 at 09:09
  • Possible duplicate of [Is there a way to detect if a browser window is not currently active?](http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active) – Gaurav Gandhi Feb 01 '16 at 09:12
  • What browser are you trying this on? – christopher Feb 01 '16 at 09:12
  • Also answered perfectly simple by @ninjagecko at: https://stackoverflow.com/questions/2720658/how-to-detect-when-a-tab-is-focused-or-not-in-chrome-with-javascript – Rafe Nov 23 '17 at 09:17

3 Answers3

4

The event you are looking for is visibilityChange https://developer.mozilla.org/en-US/docs/Web/Events/visibilitychange

When the event if fired, you can check if the page is visible or not through document[hidden]. See https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API for a working example.

Mijamo
  • 3,436
  • 1
  • 21
  • 21
  • Is this a cross browser solution? – christopher Feb 01 '16 at 09:12
  • While this works for a lot of cases, it literally tracks visibility, rather than what's focused. So if you have two browser windows open, and select the second one, the event will not trigger. It really depends on the case of course. – GMchris Feb 01 '16 at 09:47
  • Browser support is indicated at the bottom of the first link, but all recent browser support it yes. – Mijamo Feb 01 '16 at 09:53
0

This IS the API for tracking when the current tab gains or loses focus. You can spell it like so, and it will work for almost all browsers. I suggest using the following syntax:

window.addEventListener('focus', function(e){
    console.log('Focused');
})

window.addEventListener('blur', function(e){
    console.log('Unfocused');
})

One reason I can think of for not firing the event is that you're mostly sitting in your browser console. Window does not receive focus or blue events if the dev tools are what you've actually "focused".

Daniel Diekmeier
  • 3,401
  • 18
  • 33
GMchris
  • 5,439
  • 4
  • 22
  • 40
  • If you could provide a JSFiddle, I'd consider this a more complete answer. – christopher Feb 01 '16 at 09:20
  • The result panel should display "Focused" when you click inside it and "Unfocused" when you click outside. This should also work for changing your tab. https://jsfiddle.net/hy9yL2ad/ – GMchris Feb 01 '16 at 09:28
  • Afraid it's not working for me! Version 47.0.2526.111 (64-bit) Chrome. – christopher Feb 01 '16 at 09:57
  • Odd, it definitely should work on your version of Chrome. Have you tried attaching other types of events to the window or DOM elements, are you getting results with those? Any errors in the console? – GMchris Feb 01 '16 at 10:01
0

For particular HTML element..... 

 $("#elementId").focus(function(){
       //fire when element is focused...
  });
  $("#elementId").blur(function(){
      //fire when element is unfocused...
  });

For window.....

$(function() {
    $(window).focus(function() {
        console.log('Focus event');
    });

    $(window).blur(function() {
        console.log('un focus');
    });
});
Mahesh
  • 1,063
  • 1
  • 12
  • 29