Фокус ввода в HTML. Как задать полям формы горячие клавиши?

фокус ввода в html. как задать полям формы горячие клавиши?

Что такое фокус ввода

В HTML есть ряд элементов, с которыми пользователь может расширенно взаимодействовать. Это, как правило, вызывает побочные эффекты. Например, нажатие по гиперссылке загрузит в браузер другую страницу, а выбор поля <select> откроет выпадающий список.

Такое взаимодействие возможно за счет перемещения фокуса ввода. Пользователь должен явным образом активировать элемент для дальнейшей работы. Чтобы начать вводить текст нужно выбрать необходимое поле формы с помощью мыши.

Фокус ввода может быть установлен на следующих элементах: <a>, <button>, <input>, <select>, <textarea>. Как видите, к ним в основном относятся поля формы. Установленный на элементе фокус можно определить визуально. Браузеры по умолчанию обрамляют его серой границей со всех сторон.

HTML позволяет задать фокус несколькими способами:

  • Выбор необходимого элемента с помощью мыши.
  • Нажатие клавиши Tab для последовательного перехода от одного элемента к другому. В переходах участвуют только поля формы и гиперссылки, т.е элементы, поддерживающие установку фокуса ввода.
  • Полям формы или гиперссылкам можно назначить специальные «горячие клавиши». Их нажатие вызовет фокусировку на соответствующем элементе.
  • Можно указать браузеру конкретное поле, на которое необходимо установить фокус сразу после загрузки страницы. Это делается с помощью специального атрибута.

Последовательное перемещение фокуса

Атрибут tabindex позволяет задать вышеперечисленным элементам последовательность перемещения фокуса ввода при нажатии кнопки Tab. Стандартно оно идет по порядку расположения в HTML-разметке.

Tabindex должен содержать числовое значение, отображающее порядковый номер. Если задан 0, то элемент получит фокус ввода в последнюю очередь. Поля, имеющие одинаковые значения атрибута tabindex, обрабатываются согласно порядку расположения в HTML-разметке.

Можно указать конкретный элемент, требующий фокуса сразу после загрузки страницы. Это реализуется за счет добавления атрибута autofocus. Его можно использовать только для полей формы. Гиперссылки будут проигнорированы.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример управления последовательной фокусировкой ввода</title>
    </head>
    <body>
        <form>
            <!-- текстовые поля ввода -->
            <input tabindex="3" type="email" placeholder="Email">
            <input autofocus tabindex="1" type="text" placeholder="И.Ф.О">
            <br><br>
            <textarea tabindex="2" rows="5" cols="35" placeholder="Сообщение"></textarea>

            <!-- кнопка отправки формы -->
            <br><br>
            <input tabindex="4" type="submit" value="Отправить">
        </form>
    </body>
</html>
Пример отображения в браузере поля с назначенным автофокусом
Рис 1. Отображение полей с автофокусом

Указание горячих клавиш

Горячие клавиши почти никогда не используются. Многие пользователи даже не подозревают об их существовании. Тем не менее, HTML позволяет устанавливать фокус ввода при нажатии сочетания клавиш. Это становится возможным с добавлением атрибута accesskey. Его значением должна быть конкретная буква или цифра.

Срабатывание перевода фокуса на элемент произойдет при нажатии сочетания клавиш. В основной массе браузеров это сочетание определяется как Alt + значение_клавиши, но Firefox усложняет задачу. В нём необходимо набрать Shift + Alt + значение_клавиши.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример указания горячих клавиш для полей формы</title>
    </head>
    <body>
        <form>
            <!-- текстовые поля ввода -->
            <input accesskey="q" type="email" placeholder="Логин">
            <input accesskey="a" type="password" placeholder="Пароль">

            <!-- кнопка отправки формы -->
            <input accesskey="z" type="submit" value="Отправить">
        </form>
    </body>
</html>

Последние публикации