views:

150

answers:

1

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!

+1  A: 

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.

Andy E
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.
Ed Daniel
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 ;)
hallvors
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...
Ed Daniel