Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ Detecting Html5 Features/ Автофокус форм. HTML5. Up and Running. Марк Пилгрим

Автофокус форм

Дата публикации: 09.03.2011

Многие веб сайты используют Javascript чтобы автоматически установить фокус в первое поле формы. Например, на главной странице Google.com фокус автоматически устанавливается в поле ввода, таким образом ты сразу можешь вводить ключевые слова без необходимости самому устанавливать туда курсор. Хотя для большинства пользователей это удобно, но в тоже время это может стать кошмаром для разработчиков и пользователей с особыми потребностями. Пара примеров неприятных ситуаций:

  • если нажать пробел, то ожидаемой прокрутки страницы вниз не будет;
  • если ты перемещаешь фокус по полям во время загрузки страницы, то по ее окончанию Javascript переместит неожиданно для тебя фокус в первое поле.

С помощью Javascript сложно предусмотреть все подобные неприятные ситуации и у пользователей нет возможности защитится от такой «кражи» фокуса.

Для решения подобных проблем HTML5 вводит атрибут autofocus для всех элементов управления формы. Этот атрибут делает именно то, что следует из его названия — перемещает фокус в указанное поле. Но поскольку это не Javascript сценарий, а просто разметка, то поведение всех сайтов будет предсказуемо. Более того, разработчики браузеров имеют возможность предложить пользователю отключить автофокус.

Проверить поддержку автофокуса можно с помощью приема №2, описанного ранее. Если браузер поддерживает автофокус, созданный элемент input будет иметь свойство autofocus (даже если в коде этот атрибут не прописан):

function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}

С помощью Modernizr:

if (Modernizr.input.autofocus) {
// автофокус работает!
} else {
// автофокус не поддерживается :(
// возвращаемся во времена скриптов

Куда дальше

Показать комментарии