Problem tracking focus of text input elements (Mozilla?)

[Peter Wright]

Hi all.

Hopefully this should demonstrate the problem I'm having:

http://flooble.net/~pete/focus-problem-demo/

(I'm testing it in Mozilla only, but I'm not sure if it's actually a
Mozilla-only problem)

I'm capturing the focus and blur events for the document, updating a
global Javascript variable to keep track of the "currently focussed"
element.

The problem is that it just doesn't seem to work for text (or
textarea) input elements. Just about anything else, no problem, but
not text or textarea.

You can see by switching focus (eg. by tabbing) through the five input
elements. Entering/leaving the button, checkbox or select elements
generates a focus/blur event. Entering/leaving the text/textarea
elements generates absolutely nothing.

Can anyone suggest what's wrong with this picture? Is it a browser
bug or am I fundamentally misunderstanding something about tracking
element focus?


Any help greatly appreciated.

Pete.

PS. I'd just like to mention that tracking focus bugs is hell when
just about everything you do changes the focus.

 

[Martin Honnen]

Peter Wright wrote:

Hopefully this should demonstrate the problem I'm having:

http://flooble.net/~pete/focus-problem-demo/

(I'm testing it in Mozilla only, but I'm not sure if it's actually a
Mozilla-only problem)

I'm capturing the focus and blur events for the document, updating a
global Javascript variable to keep track of the "currently focussed"
element.

The problem is that it just doesn't seem to work for text (or
textarea) input elements. Just about anything else, no problem, but
not text or textarea.

If you look at the W3C DOM Events specification here
<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents>
then it says about the focus event:

focus
The focus event occurs when an element receives focus either via a
pointing device or by tabbing navigation. This event is valid for the
following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

* Bubbles: No
* Cancelable: No
* Context Info: None

so the focus event is not supposed to bubble up the DOM tree and
therefore if you only look for focus events at the document or window
level then you are not supposed to see anything if focus is set on an
input or a textarea or a button. The event is fired on the target and
that is all that is supposed to happen. As far as I test here the focus
event is properly fired on the controls, it just doesn't bubble which it
is not supposed to do.
So the bug in Mozilla is more likely that for some controls the focus
event bubbles while it shouldn't. There are open bugs on that:
<https://bugzilla.mozilla.org/buglis...me&field0-0-0=noop&type0-0-0=noop&value0-0-0=>

 

[Peter Wright]

http://flooble.net/~pete/focus-problem-demo/

(I'm testing it in Mozilla only, but I'm not sure if it's actually a
Mozilla-only problem)

[ snip ]
If you look at the W3C DOM Events specification here
<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents>
then it says about the focus event:

focus
The focus event occurs when an element receives focus either
via a pointing device or by tabbing navigation. This event is valid
for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and
BUTTON.

* Bubbles: No

Ahaaaaaa...

I should really check the official DOM documentation more often.

* Cancelable: No
* Context Info: None

so the focus event is not supposed to bubble up the DOM tree and
therefore if you only look for focus events at the document or window
level then you are not supposed to see anything if focus is set on an
input or a textarea or a button.

Okay, that does help to explain things... I was going nuts with this,
assuming that it was _supposed_ to bubble. Dammit.

The event is fired on the target and that is all that is supposed to
happen. As far as I test here the focus event is properly fired on
the controls, it just doesn't bubble which it is not supposed to do.

Argh. *sigh*

I was hoping to use this technique to track the current focus - I
guess it'll only work (for some value of "work") if I specifically set
the "focus" event handler to every single element in the display.

Ah well, I guess that'll be an acceptable solution. Sort of.

So the bug in Mozilla is more likely that for some controls the focus
event bubbles while it shouldn't. There are open bugs on that:

[ snip open bugs ]

Thanks for your help Martin, I appreciate it.

Martin Honnen
http://JavaScript.FAQTs.com/

Pete.