focus listener on non-form elements in Safari/Chrome

[Gregor Kofler]

Setting the tabIndex property an element makes it focusable and attached
key listeners respond. Or so it seems...

This procedure works in - from what I've tested - IE6+, FF, Opera.
However, Safari and Chrome (and perhaps others) fail to respond,
obviously myElement.focus() can be called, but shows no further effect.

One possibility might be a listener attached to the document, which then
redirects the event to the "focused" element - not really elegant.

Did I overlook something, or does the tabIndex/focus trick simply not
work in Safari/Chrome?

Gregor

 

[Thomas 'PointedEars' Lahn]

Setting the tabIndex property an element makes it focusable and attached
key listeners respond. Or so it seems...

This procedure works in - from what I've tested - IE6+, FF, Opera.
However, Safari and Chrome (and perhaps others) fail to respond,
obviously myElement.focus() can be called, but shows no further effect.

What is `myElement'? Not every element object has a focus() method to begin
with.

One possibility might be a listener attached to the document, which then
redirects the event to the "focused" element - not really elegant.
ACK.

Did I overlook something, or does the tabIndex/focus trick simply not
work in Safari/Chrome?

Dunno. Post your test case. (I guess you saw that coming ;-))


PointedEars

 

[Gregor Kofler]

Thomas 'PointedEars' Lahn meinte:

What is `myElement'? Not every element object has a focus() method to begin
with.

In this case an unordered list. Yes, they normally come without the
focus handling ability and hence (though from my findings you can
actually invoke a focus() method) the focus() method does nothing.

However, as Martin Honnen pointed out a few days ago (topic "keydown
listener for div"), setting a tabIndex for an element makes it magically
focusable. MS documents that for IE5+ [1] and Firefox and Opera
obviously followed (typeof element.focus() returns "function" also in
Safari).

ACK.

Since "serious" libraries like extJS (e.g.[2]) can't cope with that
either (and they've put in hundreds of kB finest JS, maybe even added
some fancy browser sniffing...), I suppose it's just not easily fixed.

Dunno. Post your test case. (I guess you saw that coming ;-))

It's the query popups in here:
http://dev.gregorkofler.com/index.php?page=xhr_widgets

I don't have a reduced test case ATM.

Gregor

[1]
http://msdn.microsoft.com/en-us/library/ms534654(VS.85).aspx
[2]
http://extjs.com/deploy/dev/examples/grid/array-grid.html