Tabindex - умный переход между элементами с помощью клавиши Tab
При работе с формами зачастую удобнее и быстрее переключаться между полями с помощью клавиши Tab, чем тыкать в нужное поле мышью. Однако, не всем известно, что можно управлять последовательностью, по которой происходит смена фокуса при нажатии Tab-а. Для этого в HTML4.01 существует атрибут tabindex.
С помощью клавиши TAB на странице можно ходить по элементам, которые способны принимать фокус. К ним относятся ссылки (A), элементы форм (BUTTON, INPUT, TEXTAREA, SELECT), области имедж-мапы (AREA) и OBJECT. Причем последовательность обхода такая же, в каком порядке элементы располагаются в потоке документа.
Browser-test
Однако, не все браузеры одинаково полезны ведут себя при tab-обходе. Убедимся в этом на примере простого кода:
<a href="#">Первая ссылка</a><br>
<button>Первая кнопка</button><br>
<input type="text" value="Первый текстбокс"><br>
<textarea>Первая текстария</textarea><br>
<select><option value="#">Первый селект</option></select><br>
</p>
<p>
<a href="#">Вторая ссылка</a><br>
<button>Вторая кнопка</button><br>
<input type="text" value="Второй текстбокс"><br>
<textarea>Вторая текстария</textarea><br>
<select><option value="#">Второй селект</option></select><br>
</p>
На первый взгляд всё просто, элементы должны принимать фокус в том же порядке, в котором располагаются в коде. Но на практике видим следующее поведение.
- IE6, IE7 — отрабатывают так, как ожидалось.
- Mozilla 1.7.2, Netscape 7.1 сначала совершают обход, как ожидалось, затем передают фокус адресной строке, а потом всему документу.
- Firefox 2.0 работает так же, как мозилла и нетскейп, плюс на после адресной строки фокус передается в search-bar (если он есть) и на активную закладку.
- WIN: Opera (версии 7.5, 9.2, 9.5) и Safari 3 передают фокус только элементам форм, напрочь игнорируя ссылки
Итак, есть серьезные отличия в поведении браузеров, а в случае Сафари и Оперы они довольно критичны.
О tabindex
Атрибут tabindex принимает целочисленные неотрицательные значения (не более 32767), которые показывают порядок, в котором будет совершаться tab-обход. Для предыдущего примера расставим табиндексы так, чтобы фокус сначала получили ссылки, потом текстарии, а остальные элементы оставим без атрибута:
<a tabindex="1" href="#">Первая ссылка</a><br>
<button>Первая кнопка</button><br>
<input type="text" value="Первый текстбокс"><br>
<textarea tabindex="3">Первая текстария</textarea><br>
<select><option value="#">Первый селект</option></select><br>
</p>
<p>
<a tabindex="2" href="#">Вторая ссылка</a><br>
<button>Вторая кнопка</button><br>
<input type="text" value="Второй текстбокс"><br>
<textarea tabindex="4">Вторая текстария</textarea><br>
<select><option value="#">Второй селект</option></select><br>
</p>
И, о чудо, даже неисправимые Опера и Сафари отрабатывают именно так, как задумывалось.
Tabindex & HTML5
В спецификации, описывающей отличия HTML4 от HTML5, в разделе New Attributes
указано, что tabindex будет глобальным атрибутом для всех HTML-элементов. Удобно, однако :-)© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
