View Full Version : onfocus bubble problem, and finding related blur element (Firefox)

08-30-2006, 10:01 PM
I have a div which is able to take the focus, as it has a tabindex. When clicked on, a focus event fires, and when something else is clicked, a blur event fires. All fine and dandy so far.

Now, I have a text box inside the div. When the text box is selected, the div loses the focus, and the blur event fires. The trouble is, I want the div to think it still has the focus, so long as anything inside that div has the focus.

So, my first thought is that focus and blur are supposed to bubble in Firefox, which means the focus event should buble from the text box to the parent div - right? Nope. It doesn't seem to get there. I'm not doing anything to stop it, either, as far as I know...

My second idea was to detect where the focus is going to, when a blur event happens, and check if that object is a descendant of my div. But it seems that the event object doesn't contain this information.

So... the question is, how can I let my div know when to let go of the focus? (It goes partly transparent when blurred, and fully opaque when focused, so you can see the problem if a child text box is being typed into and the div thinks it has lost the focus...)

(I should probably mention that I am using the activate and deactivate events in IE, which seem to bubble fine and so I am not experiencing the problem there. Hence this is a Firefox question.)

09-01-2006, 01:17 AM
I can't figure out why this isn't working. Focus bubbles in Firefox - right? (well, I can bubble focus up through divs with no problem.) I'm just not picking up a focus event in a parent div when a textbox receives the focus, no matter what I do...

Ideas, anyone? :confused:

09-01-2006, 02:07 AM
DOM2 HTML specifies that focus and blur events do not bubble. However, DOMFocusIn, DOMFocusOut, and DOMActivate events do bubble (those are defined as part of the DOM2 User Interface event module) - http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-uievents .

09-01-2006, 02:39 AM
That would be great... except that Firefox doesn't seem to know about DOMFocusIn and DOMFocusOut. At least, they don't do anything when I change my focus and blur listeners to them.

Now, I know focus and blur are not *supposed* to bubble - but we all know that in Firefox, they *do*. At least, they do for divs. Textboxes seem to be a different matter.

So... in IE I can use the activate and deactivate events (which act like focus and blur, and bubble just fine). In Firefox I can use focus and blur to get bubbling through basic elements. The DOM2 stuff says that I can use DOMFocusIn and DOMFocusOut to do the bubbling stuff for everything. Except that doesn't work.

So how do I get focus bubbling from a textbox? :(

09-01-2006, 04:12 AM
Why don't you check from in the <input> element's onfocus event handler to see if an ancestor of that <input> has a tabIndex defined?

09-01-2006, 05:21 AM
Well, I could do that, and I could also run backwards up the tree checking for onfocus handlers... but that would mean adding focus handlers to all input elements.

I've tried to do that automatically, by extending the HTMLElement object, but it doesn't work.

I definitely don't have the option of manually putting handlers onto the text boxes. The point is that the behaviour should be automatic - so if that means adding a global handler to do the checking, that's fair enough, so long as it actually works...

I've so far spent about three days on this one issue, including about 8 hours straight right now. Suffice to say that it's doing my head in! :(

09-01-2006, 06:51 AM
Via the onload event you could call document.getElementsByTagName('input') and then add the onfocus event to the <input>s that you care about.

09-01-2006, 06:58 AM
heheh, you just beat me to posting... I've just in the past couple of hours managed to get it working by doing just that. I'm using a combination of an onload procedure that finds all inputs and attaches the event handlers - just as you have just now suggested - and also a modified document.createElement function, so that new input elements will also have the handlers attached.

Sometimes I just hate web development. Inconsistencies... bah! :p

Thanks for the suggestion tho - it was the way I went in the end :)