window.onfocus not firing in IE7, inconsistent in Opera

Question

Note that this relates to focus and blur events on a window, not on form fields.

I'm loading a document in a pop-up window, and it includes the following code:

<script type="text/javascript">
window.onblur = function(){ document.title="BLURRED"; }
window.onfocus= function(){ document.title="FOCUSED"; }
</script>

These functions are temporary, for testing. I'd hoped to use these events to set a flag indicating the window state; I'm doing a chat app, and if messages come in when it's minimized I'll do some attention-getting title changes. If they don't cancel when the window gets focus, though, they'll just be annoying.

Onload, I also put focus into a textarea. (Not sure if that makes any difference.)

IE7 (I don't have another version handy) seems to recognise the window.onblur but not the window.onfocus. Opera 10 is just downright strange.

Here's what happens in the browsers I have. I launch the pop-up window by clicking on the link in the parent, then go through several minimize-restore cycles by clicking the popup's button on the (Windows XP) taskbar:

Safari 4:

• Open window: Document opens with original title
• Minimize: Title changes to "BLURRED"
• Restore: Title changes to "FOCUSED"

This is what I expected to happen.

Firefox 3.5:

• Open window: Document opens with original title, then changes to "FOCUSED"
• Minimize: Title changes to "BLURRED"
• Restore: Title changes to "FOCUSED"

The onfocus onload is a bit of a surprise, but not a problem.

IE7:

• Open window: Document opens with original title
• Minimize: Title changes to "BLURRED"
• Restore: Title does not change, no matter how many times I toggle

What happened to onfocus?

Opera 10.5

• Open window: Document opens with original title, but in another tab, not pop-up

Sometimes...

• Minimize: Title changes to "BLURRED"
• Restore: Title changes to "FOCUSED"

Sometimes...

• Minimize: Title changes to "BLURRED" then "FOCUSED"
• Restore: Title does not change

Okay, this is just plain weird...

I'm open to other approaches, but I'd really like to understand what's going on here, in plain old Javascript - so please don't give a jQuery answer unless there really is no other way around this.

Thanks!

Answer 1

onfocus and onblur are buggy on the window object in IE. The alternative is to use the propagating onfocusin and onfocusout events:

function focusin() { document.title="BLURRED"; }
function focusout() { document.title="FOCUSED"; }

if ("onfocusin" in document)
    document.onfocusin = focusin,
    document.onfocusout = focusout;
else
    window.onblur = focousout,
    window.onfocus= focusin;

I've set up an example for you here.

focusin and focusout, unlike focus and blur, are propagating events; they will fire for elements in the page and bubble upwards. You will need to check the event.srcElement or event.target if you don't want to act on this event for all elements on the page.

As for Opera, "strange" is one word you could use. The version on my machine will not fire the blur or focus events on the window for me. Hopefully someone else can offer you a solution for that.