Познавательный блог Мобильная врсия

Страницы

Промо

Перескакивание курсора по формам в HTML кнопкой TAB

На одном из сайтов при авторизации пользователя просили ввести логин и пароль, а затем нажать кнопку ВХОД. Введя логин и нажав клавишу TAB, курсор не перескочил на поле пароль и уж тем более не перескочило выделение на кнопку ВХОД. Такой расклад нас не устраивает, поэтому сейчас исправим.

С помощью клавиши TAB на странице можно ходить по элементам, которые способны принимать фокус. К ним относятся ссылки (A), элементы форм (BUTTON, INPUT, TEXTAREA, SELECT), области имедж-мапы (AREA) и OBJECT. Причем последовательность обхода такая же, в каком порядке элементы располагаются в потоке документа. В нашем случае это INPUT. Не всем известно, что можно управлять последовательностью, по которой происходит смена фокуса при нажатии Tab-а. Для этого в HTML4.01 существует атрибут tabindex.

В спецификации, описывающей отличия HTML4 от HTML5, в разделе New Attributes указано, что tabindex будет глобальным атрибутом для всех HTML-элементов.

Атрибут tabindex принимает целочисленные неотрицательные значения (не более 32767), которые показывают порядок, в котором будет совершаться tab-обход. Для предыдущего примера расставим табиндексы так, чтобы фокус сначала получили ссылки, потом текстарии, а остальные элементы оставим без атрибута:
<input size="16" tabindex="1" type="text" class="a_field" name="login_name" />
<input size="16" tabindex="2" type="password" class="a_field" name="login_password" />
<input onclick="submit();" tabindex="3" name="submit" type="image" src="button.gif" alt="" />

В нашем примере, я добавил tabindex="#" в том порядке, в котором здравомыслящий пользователь вводит логин, пароль и жмет кнопку ВХОД. В некоторых браузерах фокус переключается и без указания аттрибута tabindex, но как показывает практика, не во всех

Написать комментарий








Поиск по сайту

Статистика

Мета

  Разработка и дизайн — StvPromo.ru