Как сделать фокус на форме ввода при загрузке страницы

    3 комментария 3450

Курсор в поле ввода при загрузке страницыЗдравствуйте, друзья. Однажды я искал решение, как сделать, чтобы при загрузке страницы, фокус попадал сразу на форму вода. Это реализовано в поисковых системах и на моем блоге на странице подсчета символов онлайн. Я считаю, что это очень удобно в определенных случаях, не нужно лишний раз тыкать мышкой в поле ввода, чтобы его активировать. Способов решения здесь два. Первый-через CSS, а второй-через JavaScript и сейчас мы рассмотрим оба этих способа.

Через CSS поставить курсор в поле ввода сразу после загрузки страницы очень легко. Достаточно прописать к тегам input атрибут autofocus. Вот пример кода:

Телеграм-канал serblog.ru

<input name="name" type="text" class="default" maxlength="200" size="50" autofocus/>

Теперь о минусах этого способа. В браузере Internet Explorer не работает вообще. В остальных популярных, но последних версий работает/ Дело в том, что этот атрибут из спецификации HTML5, а ее пока не все браузеры поддерживают. Но в последнее время появляется все больше и больше сайтов, разработанных на HTML5 и CSS3 и их владельцев не волнует, что некоторые браузеры не успевают за технологическим прогрессом. Так что использовать данный метод можно, это не критично.

Во втором способе будем использовать JavaScript и этот способ тоже не сложный. Для начала к тегу body нужно прописать необходимое событие, наглядно это будет так:

<body onload="setFocus()">...</body>

Для тега input, на который нужно установить фокус при загрузке страницы, прописать идентификатор (id) и вот пример:

<textarea id="text" name="top"></textarea>

После чего прописать коротенький JavaScript код:

1
2
3
4
5
6
<script type="text/javascript">
function setFocus()
{
     document.getElementById("text").focus();
}
</script>

Демо

Этот способ весьма эффективный при минимуме кода. Если в браузере включены скрипты, то даже самый древний браузер будет обрабатывать и выводить на экран то, что нам нужно. Вот такие дела. Возможно вам будет интресно почитать про скрипт переадресации. И поделитесь этой записью в социальных сетях. Спасибо.

Любая сумма на развитие сайта

3 комментария
  1. Temitope:

    Как, например, это сделано на главной странице поисковой системы Рамблер, где курсор при загрузке страницы устанавливается в поле ввода поискового запроса. Реализовать такую передачу фокуса заданному элементу можно с помощью языка JavaScript.

  2. Спасибо, работает

  3. Владимир:

    Благодарю за помощь.
    На странице несколько калькуляторов, теперь результат не надо искать.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *