Pořadí inputů při přeskakování TABem pomocí tabindex

Pokud v přeskakování mezi jednotlivými inputy/selecty/checkboxy používáte především tabulátor, někdy Vás překvapí, když automaticky vybrané další pole je jiné, než to, jaké následuje v kódu.

Chování se prohlížeč od prohlížeče různí, proto neexistuje jednoduché vysvětlení, jak jdou za sebou inputy…

Máte-li ale zájem o vytvoření předem nadefinovaného pořadí inputů, je to zcela jednoduché. Navíc to bude fungovat všude, protože není potřeba nic jiného, než jen klasické HTML, dokonce i bez JavaScriptu si dnes vystačíme.

Pořadí inputů při přeskakování určuje vlastnost tabindex. Do kódu ji zanesete stejně jednoduše jako třeba value, nebo length.

<input type="text" name="jmeno" tabindex="1"><br>

Důležitá je zde zvýrazněná hodnota tabindex=“?“. Čísla uvádějte vždy v posloupnosti a vždy ve vzestupném pořadí, jak chcete mezi poli/inputy přeskakovat. Například zde

<form>
  Jméno (první vybrané pole):
  <input type="text" name="jmeno" tabindex="1"><br>
  Telefon (třetí vybrané pole):
  <input type="text" name="telefon" tabindex="3"><br> 
  E-mail (druhé vybrané pole):
  <input type="text" name="email" tabindex="2"><br>
</form>

Jsou inputy uvedeny v HTML v pořadí

1. Jméno
2. Telefon
3. E-mail

Ale jelikož je u každého inputu uveden také tabindex, tak pořadí v HTML nemá žádný vliv. Podle tabindexu bude tedy přeskakování mezi inputy pomocí tabu následovné

1. Jméno (tabindex=“1″, ačkoliv pořadí v HTML je 1.)
2. E-mail (tabindex=“2″, ačkoliv pořadí v HTML je 3.)
3. Telefon (tabindex=“3″, ačkoliv pořadí v HTML je 2.)

Jednoduché, že? 🙂