Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how could a <ul> element receive the focus event?

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.

like image 392
Frank Schwieterman Avatar asked Dec 22 '09 18:12

Frank Schwieterman


People also ask

What elements can receive focus?

Understanding Focus The following elements can receive focus: <a> tags with an href attribute. Form controls and buttons (unless the element is disabled) Any element with a tabindex .

How do you trigger an event on focus?

How to trigger focus event on a textbox using javascript? For example in jQuery we can trigger the focus event with $('#textBox'). focus() .

What HTML elements can get focus?

There isn't a definite list, it's up to the browser. The only standard we have is DOM Level 2 HTML, according to which the only elements that have a focus() method are HTMLInputElement , HTMLSelectElement , HTMLTextAreaElement and HTMLAnchorElement .

What is the focus event?

The focus event fires when an element has received focus. The main difference between this event and focusin is that focusin bubbles while focus does not. The opposite of focus is blur . This event is not cancelable and does not bubble.


1 Answers

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)

like image 56
Juraj Blahunka Avatar answered Sep 20 '22 14:09

Juraj Blahunka