Question

I’m running the following code to trace the tagName of every control that gets focus in an HTML document:

$(function() {
    $("*").bind("focus", function() {
        console.log("tabbed " + this.tagName);
    });
});

When this runs I can watch the firebug console and see it trace tags like “A” and “INPUT” which I’d expect to receive focus as I tab through the document. However it also traces one “UL” tag. The document has multiple UL tags and only this one UL tag seems to get focus.

Any ideas how this could have happened? The UL Tag that has focus has no attribute (name, id, etc) so I have no idea how it would have been modified by other script.

(running in firefox. The page I’m looking at is quite large so I’m not including the source, but the UL tag has no attributes, contains some LIs, one of those LIs does contain a tag).

According to Which HTML elements can receive focus?, maybe its because some script has set a tabindex on that UL tag. I can’t find any such script though.

Note that I am not trying to figure out how to make the UL focusable, but rather figure out why it is focusable.

Answer 1

Handling focus totally depends on browser implementation.

Hovewer you can force focus on html elements by adding tabindex property eg.:

<ul tabindex="1">
    <li>item</li>
    <li>item</li>
</ul>

<ul tabindex="2">
    <li>item</li>
    <li>item</li>
</ul>

This “hack” should force UL elements to be focusable (worked for me)