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.

Madisonmadlen

What is event.target when the Opera tab is minimised and the title still changes to 'focused'? – Fonville

Tried this: jsbin.com/omeye3 and it seems to work OK for me (some Opera 10.70 preview build). Could you create a small demo that shows the problem for you? – Fonville

Incorrect behaviour is present on your jsbin test in Version 9.20 Build 8771, and Version 10.62 Build 3500. – Madisonmadlen

OK, I guess Enter means Submit here. Grrr. I don't have the code handy to test the target, but can do that later. The behaviour is sometimes correct if I click another application's taskbar button, but if I just use Opera's own to minimise and restore it the bug is more obvious. I run everything maximised, BTW. On this machine, I see the title stuck on FOCUSED, changing to BLURRED then FOCUSED about 1 in 10-15 times. – Madisonmadlen

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.

Outgeneral

Thank you very much for this. It looks like it'll do the job nicely. As for Opera: this functionality is just a nicety, so I expect I'll detect window.opera and leave it out to dry. – Madisonmadlen

If it will only be a small nuisance until we fix focus/blur bugs I suggest not detecting window.opera but just leaving it buggy - that way it will work fine automatically when we get fixes out ;) – Fonville

That would be nicer. If I could guarantee that it would get stuck in the FOCUSED state, the only consequence would be a lack of new message notifications (taskbar animations by manipulating the title). I've managed to get it stuck on BLURRED, though, which would mean the animations didn't cancel. I might be able to get away with an additional cancel onfocus of the textarea where the user types his message... – Madisonmadlen