CODEWITHSUNDEEP
htmlkeyboard
Christoph
Christoph

Reputation: 133

HTML Form-Select: behavior using Keyboard

I've a mysterious problem. I've built a browser-based application for a customer who prefers to use the keyboard - no mouse, no touch panel. I have a simple HTML-Form like this which contains some times:

<input tabindex="1" name="abc" type="text" />
<select tabindex="2" name="efg">
<option value="10:00:00">10.00</option> 
<option value="11:00:00">11.00</option> 
<option value="12:00:00">12.00</option> 
<option value="...">up to 24</option>
</select>

now my customer recognized that it's not possible to select the "11.00" option using keyboard. E.g. after hitting "TAB" and jumping to "select" you can enter "10" on the numblock of your keyboard and the option "10.00" is selected. It's possible on any time, except "11.00" and "22.00". Hitting the key "1" or "2" twice the pointer always jumps to the next option (e.g: twice "1" -> 12.00 is selected) I've checked this behavior on any major browser under Linux and Windows: Everywhere the same issue.

jsFiddle

Is there an option to fix the problem?

Upvotes: 1

Views: 8657

Answers (1)

Sylvia Pellicore
Sylvia Pellicore

Reputation: 21

Assuming you don't have any JavaScript interference, this select should be totally usable with only a keyboard with the default browser behavior. Once you have selected a dropdown using tab, you can:

  • Type a character to jump to the first option that starts with this character
  • Type the character again to jump to the next option that starts with this character (and so forth)
  • Use the up and down arrow keys to navigate through the options
  • Use the enter key, spacebar, or Alt + Down to expand the list of options
  • Use Alt + Up to collapse the list of options
  • Collapse the options by using Tab to jump to the next focusable element.

I dropped your sample HTML into a clean webpage, and everything worked as I expected. I'd check to see if you have any JS that is capturing the relevant keypress events.

Upvotes: 2

Related Questions