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 e 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.

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 e 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.

• javascript
• internet-explorer
• dom-events
• opera
• onfocus

Share Improve this question Follow edited Apr 7, 2021 at 8:52 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 17, 2010 at 16:29 Ed DanielEd Daniel 5171212 silver badges2323 bronze badges 4

• 1 What is event.target when the Opera tab is minimised and the title still changes to 'focused'? – hallvors Commented Sep 23, 2010 at 1:18
• 1 Tried this: jsbin./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? – hallvors Commented Sep 23, 2010 at 1:24
• Incorrect behaviour is present on your jsbin test in Version 9.20 Build 8771, and Version 10.62 Build 3500. – Ed Daniel Commented Sep 23, 2010 at 14:47
• 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. – Ed Daniel Commented Sep 23, 2010 at 14:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.