Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I capture the blur and focus of the entire browser window?

I would like to capture the blur and focus of the actual browser window - meaning that change of focus to child frames is not of interest.

Currently I have been using $(top).focus() $(top).blur()

and $(window).focus() $(window).blur()

However, these fire when the user changes focus to embedded iframes, which I don't want.

Does anyone know of a way to capture TRUE activation and deactivation of the window?

[EDIT]

Blur and focus events fire when a user moves from a web-page, to the web-page of an embedded iframe. This is different from 'window activation' events, which only fire when the actual BROWSER WINDOW (or tab) is brought to the front, or sent away (i.e, tab changed, or minimized).

I am not interested in blur, because the fact that the user has navigated to an embedded frame is of no consequence to the program. However, if the user minimizes the window, changes tabs, or switches to another program, I want to know about it...

like image 661
Adam Avatar asked Mar 26 '12 21:03

Adam


People also ask

Which method is used in browser to focus to a new window?

The focus() method is used to focus on the new open window.

What is window blur?

The window. blur() method is the programmatic equivalent of the user shifting focus away from the current window.

What is the difference between Blur and Focusout?

The focusout event fires when an element has lost focus, after the blur event. The two events differ in that focusout bubbles, while blur does not. The opposite of focusout is the focusin event, which fires when the element has received focus.

How do you blur a screen in HTML?

The “backdrop-filter: blur()” property gives the blur effect on the box or any element where it is desired and “before” is used to add the blurred background without applying any extra markup. HTML Code: In this section, we will use HTML code to design the basic structure of the web page.


2 Answers

you dont need jquery.
window.onblur and window.onfocus can solve your problem :)

(function(){
    var timer = null;
    var has_switched = false;

    window.onblur = function(){
      timer = settimeout(changeitup, 2000);
    }  

    window.onfocus = function(){
      if(timer) cleartimeout(timer);
    }

    function changeitup(){
        if( has_switched == false ){
            alert('the tab lost focus')
            has_switched = true;    
        }
    }
})();

The onblur property can be used to set the blur handler on the window, which is triggered when the window loses focus.

like image 107
RASG Avatar answered Oct 24 '22 19:10

RASG


i have this

$(function() {

    $(window)
        .focus(function() { document.getElementById('play_banner').value = true; })
        .blur(function() { document.getElementById('play_banner').value = false; })

 })

working fine on IE, firefox and chrome, where the banner only animate when play_banner is set to true, so it stop working when the user changes the page, and when he's back it continues from where it was...

like image 22
Caio Felipe Giasson Avatar answered Oct 24 '22 19:10

Caio Felipe Giasson