Здравствуйте, друзья. Однажды я искал решение, как сделать, чтобы при загрузке страницы, фокус попадал сразу на форму вода. Это реализовано в поисковых системах и на моем блоге на странице подсчета символов онлайн. Я считаю, что это очень удобно в определенных случаях, не нужно лишний раз тыкать мышкой в поле ввода, чтобы его активировать. Способов решения здесь два. Первый-через CSS, а второй-через JavaScript и сейчас мы рассмотрим оба этих способа.
Через CSS поставить курсор в поле ввода сразу после загрузки страницы очень легко. Достаточно прописать к тегам input атрибут autofocus. Вот пример кода:
<input name="name" type="text" class="default" maxlength="200" size="50" autofocus/> |
<input name="name" type="text" class="default" maxlength="200" size="50" autofocus/>
Теперь о минусах этого способа. В браузере Internet Explorer не работает вообще. В остальных популярных, но последних версий работает/ Дело в том, что этот атрибут из спецификации HTML5, а ее пока не все браузеры поддерживают. Но в последнее время появляется все больше и больше сайтов, разработанных на HTML5 и CSS3 и их владельцев не волнует, что некоторые браузеры не успевают за технологическим прогрессом. Так что использовать данный метод можно, это не критично.
Во втором способе будем использовать JavaScript и этот способ тоже не сложный. Для начала к тегу body нужно прописать необходимое событие, наглядно это будет так:
<body onload="setFocus()">...</body> |
<body onload="setFocus()">...</body>
Для тега input, на который нужно установить фокус при загрузке страницы, прописать идентификатор (id) и вот пример:
<textarea id="text" name="top"></textarea> |
<textarea id="text" name="top"></textarea>
После чего прописать коротенький JavaScript код:
1
2
3
4
5
6
| <script type="text/javascript">
function setFocus()
{
document.getElementById("text").focus();
}
</script> |
<script type="text/javascript">
function setFocus()
{
document.getElementById("text").focus();
}
</script>
Демо
Этот способ весьма эффективный при минимуме кода. Если в браузере включены скрипты, то даже самый древний браузер будет обрабатывать и выводить на экран то, что нам нужно. Вот такие дела. Возможно вам будет интресно почитать про скрипт переадресации. И поделитесь этой записью в социальных сетях. Спасибо.
3080![Youtube канал Александр Маврин](/files/img/youtube_subscribe.jpg")
Как, например, это сделано на главной странице поисковой системы Рамблер, где курсор при загрузке страницы устанавливается в поле ввода поискового запроса. Реализовать такую передачу фокуса заданному элементу можно с помощью языка JavaScript.
Спасибо, работает
Благодарю за помощь.
На странице несколько калькуляторов, теперь результат не надо искать.