Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ Form Of Madness/ Автофокус полей. HTML5. Up and Running. Марк Пилгрим

Автофокус полей

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

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

При реализации автоматического получения фокуса на Javascript, очень трудно предусмотреть все возможные случаи, когда пользователю нужна эта функция.

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

IE Firefox Safari Chrome Opera iPhone Android
4.0+ 3.0+ 10.0+ + +

В коде автофокус прописываем вот так:

<form>
	<input name=&qout;q&qout; autofocus>
	<input type=&qout;submit&qout; value=&qout;Search&qout;>
</form>

Браузеры, которые не понимают новый атрибут, просто его проигнорируют.

А как же браузеры, которые не поддерживают HTML5? Для них оставляем привычный Javascript сценарий. Поэтому сейчас имеет смысл использовать автофокус следующим образом:

  1. Добавить атрибут autofocus в разметку.
  2. Определить поддерживает ли браузер автофокус и если нет — запустить свой сценарий:
<form name="f">
	<input id="q" autofocus>
	<script>
		if (!("autofocus" in document.createElement("input"))) {
		document.getElementById("q").focus();
		}
	</script>
	<input type="submit" value="Go">
</form>
...

Многие веб страницы ждут события window.onload чтобы установить фокус в нужное поле. Но это событие сработает только тогда, когда все элементы страницы будут загружены. Если на странице присутствует большое количество изображений, то после их загрузки сценарий потенциально способен переустановить фокус с поля, который был изначально в фокусе, после того как пользователь уже начал вводить информацию. По этой причине опытные пользователи терпеть не могут автофокусировку. В нашем примере такого не произойдет, т.к. наш сценарий находится (по коду) после нужного поля. Но такой вариант не очень гибок при создании шаблонов на стороне сервера. Лучше привязывать данную функцию к пользовательскому событию, например, такому, как в jQuery $(document).ready(), вместо window.onload.

Куда дальше

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