Html фокус при загрузке страницы

HTML Set focus on load event by using body tag

In a form we can keep the blinking cursor focused in any component at the time of opening of the page. This way the visitor can directly enter the data or make selection without putting extra effort on selecting the form element. Much time we know the first job for the user is to enter the data in a particular field, so by default we can keep the cursor in that so the data can be entered directly. The user always has the option of changing the cursor or focus on different form element based on the requirement.

HTML input textbox and its attributes like name value size maxlength autofocus with examples.

For example let us take the case of a login form where the member has to enter the login id and password. As there are two input fields used for this purpose, generally the user will enter user id first and then move to next field to enter password. Here we can keep our focus to the user id field at the time of page open or load so the member can directly enter ID in the text box. So we have to set our focus to the user id field at the time of page load. We can achieve this by using onload command in the body html tag. Like this

The onLoad command inside the body tag will set the focus to the text field of the form.
demo of set focus ( refresh this page ) →
You can always see the cursor in the above text field every time this page reloads.

autofocus

plus2net.com

Click here for More on FORM and HTML fields

• Text Field to enter any (short ) text usually upto 100 chars length
• Hidden Field to pass data not visible to user
• Password Field Similar to text field but date entered is not masked or shown as **
• TextArea Entering large amount of text
• RadioButton Selecting one option out of many
• Checkbox Selecting one or more option out of many
• ButtonTo trigger user generated events or action
• Image Button Used to click actions for some script of event to happen
• Submit Button A button to all user entered data of a form
• Two Submit ButtonsSubmitting same form data to two different forms
• Submit new window Submitting form data to a new window
• Reset Button A button to reset the form data
• Drop-Down Menu Selecting one option from a list of option available in a list box or drop down menu
• Datalist Options to Select with Auto Complete facility
• Back Button Returning to previous page by clicking
• File UploadUploading files to the server by using html form
• Set focus Keeping cursor on input box at the time of page loading

Источник

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

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

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

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

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

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

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

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

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

script type="text/javascript"> function setFocus() { document.getElementById("text").focus(); } script>

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

Читайте также:

Источник

Фокусировка: focus/blur

Элемент получает фокус, когда пользователь кликает по нему или использует клавишу Tab . Также существует HTML-атрибут autofocus , который устанавливает фокус на элемент, когда страница загружается. Есть и другие способы получения фокуса, о них – далее.

Фокусировка обычно означает: «приготовься к вводу данных на этом элементе», это хороший момент, чтобы инициализовать или загрузить что-нибудь.

Момент потери фокуса («blur») может быть важнее. Это момент, когда пользователь кликает куда-то ещё или нажимает Tab , чтобы переключиться на следующее поле формы. Есть другие причины потери фокуса, о них – далее.

Потеря фокуса обычно означает «данные введены», и мы можем выполнить проверку введённых данных или даже отправить эти данные на сервер и так далее.

В работе с событиями фокусировки есть важные особенности. Мы постараемся разобрать их далее.

События focus/blur

Событие focus вызывается в момент фокусировки, а blur – когда элемент теряет фокус.

Используем их для валидации(проверки) введённых данных.

• Обработчик blur проверяет, введён ли email, и если нет – показывает ошибку.
• Обработчик focus скрывает это сообщение об ошибке (в момент потери фокуса проверка повторится):

 .invalid < border-color: red; >#error Ваш email: >; input.onfocus = function() < if (this.classList.contains('invalid')) < // удаляем индикатор ошибки, т.к. пользователь хочет ввести данные заново this.classList.remove('invalid'); error.innerHTML = ""; >>; 

Современный HTML позволяет делать валидацию с помощью атрибутов required , pattern и т.д. Иногда – это всё, что нам нужно. JavaScript можно использовать, когда мы хотим больше гибкости. А ещё мы могли бы отправлять изменённое значение на сервер, если оно правильное.

Методы focus/blur

Методы elem.focus() и elem.blur() устанавливают/снимают фокус.

Например, запретим посетителю переключаться с поля ввода, если введённое значение не прошло валидацию:

 .error Ваш email:   

Это сработает во всех браузерах, кроме Firefox (bug).

Если мы что-нибудь введём и нажмём Tab или кликнем в другое место, тогда onblur вернёт фокус обратно.

Отметим, что мы не можем «отменить потерю фокуса», вызвав event.preventDefault() в обработчике onblur потому, что onblur срабатывает после потери фокуса элементом.

Однако на практике следует хорошо подумать, прежде чем внедрять что-то подобное, потому что мы обычно должны показывать ошибки пользователю, но они не должны мешать пользователю при заполнении нашей формы. Ведь, вполне возможно, что он захочет сначала заполнить другие поля.

Потеря фокуса может произойти по множеству причин.

Одна из них – когда посетитель кликает куда-то ещё. Но и JavaScript может быть причиной, например:

• alert переводит фокус на себя – элемент теряет фокус (событие blur ), а когда alert закрывается – элемент получает фокус обратно (событие focus ).
• Если элемент удалить из DOM, фокус также будет потерян. Если элемент добавить обратно, то фокус не вернётся.

Из-за этих особенностей обработчики focus/blur могут сработать тогда, когда это не требуется.

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

Включаем фокусировку на любом элементе: tabindex

Многие элементы по умолчанию не поддерживают фокусировку.

Какие именно – зависит от браузера, но одно всегда верно: поддержка focus/blur гарантирована для элементов, с которыми посетитель может взаимодействовать: , , , и т.д.

Это можно изменить HTML-атрибутом tabindex .

Любой элемент поддерживает фокусировку, если имеет tabindex . Значение этого атрибута – порядковый номер элемента, когда клавиша Tab (или что-то аналогичное) используется для переключения между элементами.

То есть: если у нас два элемента, первый имеет tabindex=»1″ , а второй tabindex=»2″ , то находясь в первом элементе и нажав Tab – мы переместимся во второй.

Порядок перебора таков: сначала идут элементы со значениями tabindex от 1 и выше, в порядке tabindex , а затем элементы без tabindex (например, обычный ).

При совпадающих tabindex элементы перебираются в том порядке, в котором идут в документе.

Есть два специальных значения:

• tabindex=»0″ ставит элемент в один ряд с элементами без tabindex . То есть, при переключении такие элементы будут после элементов с tabindex ≥ 1 . Обычно используется, чтобы включить фокусировку на элементе, но не менять порядок переключения. Чтобы элемент мог участвовать в форме наравне с обычными .
• tabindex=»-1″ позволяет фокусироваться на элементе только программно. Клавиша Tab проигнорирует такой элемент, но метод elem.focus() будет действовать.

Например, список ниже. Кликните первый пункт в списке и нажмите Tab :

Источник