Событие focus() JavaScript на DOM-элементе устанавливает фокус на этот элемент. Когда элемент находится в фокусе, он перехватывает и обрабатывает события клавиатуры.

Элементы, поддерживающие событие focus JavaScript.

<input> (текстовые поля, чекбоксы, радиокнопки, range и др.);

Примерный синтаксис focus JavaScript?

Html :


<input type="text" id="idInput" placeholder="Событие focus">

JavaScript :


<script>

document.getElementById('idInput').addEventListener('focus', function(e) {

 console.log('focus: ' + e.target.value); // Сработает после потери фокуса

}); 

</script>

Что значит "Сработает после потери фокуса"?

Т.е. когда курсор мыши покинет объект.

Живой код focus в JavaScript.

Давайте соберем собственный пример "focus в JavaScript", для этого вам понадобится :

Выше приведенный синтаксис с некоторыми изменениями...

Добавим тег div, чтобы вы могли видеть реальный живой пример прямо здесь на странице...

В него помещаем id с произвольным значением "here".

Любым из способов обратиться по id ..

Используем innerHTML для передачи вводимых данных.

Далее - e.target + value js... получим вот:


		here. innerHTML = e.target.value ;

Соберем весь код focus в JavaScript.

Html :


<input type="text" id="id_input" placeholder="Событие focus">

<div id="here"></div>

JavaScript :


<script>

document.getElementById('id_input').addEventListener('focus', function(e) {

 here. innerHTML = e.target.value ; 

});

</script>

Пример focus в JavaScript.

Теперь давайте протестируем "focus в JavaScript":

Поставьте мышку в поле ввода и введите любое значение...

Кликните мышкой в любом другом месте на странице.

Верните курсор мыши внутрь формы и вы увидите результат "focus в JavaScript":

Как ещё использовать focus в JavaScript?

Пример использования focus в JavaScript:

Ниже представлен код установки focus в JavaScript с помощью другой кнопки.

Зачем!?

Иногда возникает необходимость программно установить фокус на определённый элемент интерфейса. Рассмотрим типичные ситуации:

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

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

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

Все эти случаи объединяет одно: фокус нужно перемещать не по стандартной последовательности, как это делает браузер, а произвольно. Для этого используется метод focus().

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

Html:


<select id="focus-selector">

 <option value="" disabled="" selected="">Никуда</option>

 <option value="name">Имя</option>

 <option value="email">Почта</option>

</select>

JavaScript :


 <form method="POST">

 <label>

 Имя:

 <input type="text" name="name" id="name">

 </label>



 <label>

 Почта:

 <input type="email" name="email" id="email">

 </label>

 </form>