Событие Javascript focus и атрибут html onfocus. Фокус на элементе формы.

Текстовые поля, вкладки и окна, которые могут размещаться в HTML-формах, имеют событие, с помощью которого с ними можно взаимодействовать. Это событие называется фокусом.

Что такое фокус на текстовом поле?

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

Нужно понимать, что клик (click) по элементу и фокус на элементе – это два совершенно разных события. Клик по элементу это всего лишь один из способов, как можно поместить в него фокус, т.е. сделать его активным. Как альтернативный вариант задания фокуса элементу, служит клавиша Tab на клавиатуре.

В Javascript есть специальное событие, которое называется focus(), оно выполняется, когда элемент получает фокус.

Давайте рассмотрим пример, как это работает:

 HTML-код:

<form name = "TestForm" action="#">
<input type = "text" value="Текстовое поле 1" name="text1" />
<br />
<input type = "text" value="Текстовое поле 2" name="text2" />
<br />
<input type = "button" value = "Фокус на текстовом поле 1" name="myButton1"
onclick="FocustoTextbox(1)" />
<input type = "button" value = "Фокус на текстовом поле 2" name="myButton2"
onclick="FocustoTextbox(2)" />
</form>

Javascript:

<script type="text/javascript">
function FocustoTextbox(x){
if(x == 1){
document.TestForm.text1.focus();
}else if(x == 2){
document.TestForm.text2.focus();
}
}
</script>

Кроме того, есть специальный html-атрибут, который позволяет отследить получение фокуса элементом. Этот атрибут называется onfocus. Вот пример, как можно использовать его на практике:

<input type="input" value="Кликните сюда" onfocus="this.value='Получен фокус'">