Javascript and Cross-browser Window focus

It is a common requirement in today’s highly interactive web applications to keep track if the browser window is currently in focus. Let me tell you one thing. If you take a look at the browser events and the very limited documentation, you might be tempted to believe that you are in safe hands. But thats not the case.

Catching the onblur and onfocus events is the most recommended way to know when a window gains or loses focus. But this does not work in all cases. The onfocus event is triggered correctly in almost all browsers. But onblur on the other hand is highly unpredictable. In Internet Explorer, every onfocus event is immediately followed by an onblur event even though the window is still in focus. On Firefox, the onblur will not be trigerred if the active element of the window is of input type.

Solution: IE has its custom events which works fine for it namely focusin and fosucout. For firefox, we need to check whether the active element has changed.

var isIE = (navigator.appName == "Microsoft Internet Explorer");
var hasFocus = true;
var active_element;

function setFocusEvents()	{
	active_element = document.activeElement;
	if (isIE)	{
		document.onfocusout = function() {	onWindowBlur();	      }
		document.onfocusin = function()	 {	onWindowFocus();     }
	}	else	{
		window.onblur = function()	  {	onWindowBlur();	         }
		window.onfocus = function()	 {	onWindowFocus();       }
	}
}

function onWindowFocus()	{
	hasFocus = true;
}

function onWindowBlur()	{
	if (active_element != document.activeElement) {
		active_element = document.activeElement;
		return;
	}
	hasFocus = false;
}

NB: I have tested mostly on IE 6+ and Firefox. So you might find my method incomplete for other browsers.

Update: This post has been updated (corrected) as per Lucent’s comment.

12 thoughts on “Javascript and Cross-browser Window focus

  1. I was very excited to find this, but disappointed to find window.onfocusin/out do not fire in IE7. Perhaps this script could be modified to use document.onfocusin?

  2. Very nice solution, thank you! While in my special case, I didn’t need to use the activeElement part, the rest seems to work fine in Safari 3.1 and Opera 9, too.

  3. Hey dude, for some reason your code doesn’t work with me (IE6 / FF), any ideas?

    PS: I’ve create a new solution that works for me, if you want you can take a look at it in my blog.

    Regards.

  4. Thanks for putting this code out there! Needed a quick example and this site popped up first. Works wonderfully though you’re missing a ‘;’ on line 12 above.

    • I’m getting the same as Rajeev in Safari 3.3 and 4. Safari doesn’t seem to give an onfocus event on load like the other browsers do. You have to load, and then lose focus, before an onfocus will fire in Safari.

      I’m trying to create something that will put a hold a SWF embed until the window has focus and I’m banging my head on how to accomplish in Safari.

  5. This solution relies on “document.activeElement” being supported. On my Firefox 3.5.6 “document.activeElement” is undefined.
    Wouldn’t the essential “active_element != document.activeElement” test in onWindowBlur() be ineffective under these circumstances?

  6. hello
    i’m so glad that i saw this website. that comment was so great. thanks again i bookmarked this blog.
    are you planning to write similar articles?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>