Красивый focus-переход между web-элементами

Если Вы разрабатываете большую web-форму, то необходимо сделать ее максимально удобной для пользователей. Огромная форма часто отталкивает посетителей и заставить ее заполнить можно только максимально облегчив сам процесс заполнения.

Одним из таких облегчений можно считать удобную навигацию между пунктами. Некоторым пользователям удобнее в своей работе использовать только клавиатуру, оставляя мышку на какие-то вынужденные вещи, которые без мышки просто не сделать.

У каждого элемента формы есть такой css-параметр или правильнее сказать псевдокласс – :focus, который позволяет задавать свечение «активному» элементу. Когда Вы для активирования web-элемента формы используете мышку, то вас мало волнует наличие этого самого фокуса, но когда вашим основным инструментом ввода является клавиатура, то недальновидность web-разработчика разозлит не по-детски. Как понять где ты находишься в данный момент? Обычно такие сайты я сразу закрываю.

Вот две подопытные формы:

У этих форм отсутствует css-псевдокласс :focus и понять какая форма активна – сложно. Стоит учесть, что в этой форме всего 4 элемента, а если их будет 20?

.form-2:focus {
  box-shadow: 0 0 2px 3px #78aeda,
              0 0 2px #78aeda inset;
}

то выглядеть это будет значительно лучше и многие посетители за это Вам скажут спасибо.

Если вы для быстрого перехода между элементами формы используете клавишу , то заметите, что переключение происходит рывками и выглядит это не совсем эстетично.

Добавить анимацию переходов между элементами формы поможет небольшой плагин – flying-focus.js (4 Кб.)

<script src="https://n12v.com/focus-transition/flying-focus.js"></script>

Как это работает можно увидеть на этом блоге. Просто пощелкайте на клавише .

Теги: JavaScript

Комментарии

fortresseo, 14.10.2013 09:38 #

Класная штука. Только в первом примере у меня текущее поле подсвечивается оранжевым контуром. А во втором плюс еще дополнительно серым, который смешивается с оранжевым и выглядимт грязновато. То есть в первом варианте все великолепно и подсветка и анимация.

Зюзгин Иван, 16.10.2013 05:35 #

Вы, наверное, пользуетесь браузером Opera, который дополнительно подсечивает оранжево-желтым цветом

Зюзгин Иван, 16.10.2013 05:44 #

Убрать это можно добавив css-параметр outline: none;