CODEWITHSUNDEEP
javascripthtml
Jesvin Jose
Jesvin Jose

Reputation: 23098

How to make divs navigable by tab/down?

enter image description here

In this example, I type in java and I hit tab/down, and I can start navigating the results. Its also sane as I can select the text and open the learn more link.

I want to make an autosuggest like this. How do I make it keyboard navigable as:

  1. tab/down from textbox moves to first element
  2. tab/down from an element moves to next element
  3. up reverses both 1. and 2., you can move from an element to the textbox

I have tried setting tabindex to a bunch of elements. I can make them selectable, once selected I can only navigate only by tab (in Firefox), no up or down, much less going back to the textbox.

<textarea tabindex=1>something</textarea>
<ul>
<li tabindex=1>one item <a href="google.com">and link</a></li>
<li tabindex=1>one item</li>
<li tabindex=1 >one item</li>
</ul>

I also need to lay out everything consecutively in the HTML, whereas I usually add popovers as the last element to the body and absolutely position them.

I guess StackOverflow the site must be handling the tab, up and down keys and calculating which one gets focus; tabindex seems kinda limiting.

Upvotes: 1

Views: 1740

Answers (1)

Aibrean
Aibrean

Reputation: 6422

Your problem is your tabindexes are all the same values. You need to make them incremental in the order you want them tabbed.

<textarea tabindex="1">something</textarea>
<ul>
<li tabindex="2">one item <a href="google.com">and link</a></li>
<li tabindex="3">one item</li>
<li tabindex="4">one item</li>
</ul>

This is assuming you're using HTML5.

Upvotes: 1

Related Questions