Красивый 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 Кб.)
Для его использования добавляем рядом с закрывающимся тегом body html-код:<script src="https://n12v.com/focus-transition/flying-focus.js"></script>Как это работает можно увидеть на этом блоге. Просто пощелкайте на клавише
Теги: JavaScript и сайт
Класная штука. Только в первом примере у меня текущее поле подсвечивается оранжевым контуром. А во втором плюс еще дополнительно серым, который смешивается с оранжевым и выглядимт грязновато. То есть в первом варианте все великолепно и подсветка и анимация.
Вы, наверное, пользуетесь браузером Opera, который дополнительно подсечивает оранжево-желтым цветом
Убрать это можно добавив css-параметр outline: none;