# Фокус текстовых полей в JavaScript

Пусть у нас есть инпут. Вы можете нажать на этот инпут и после этого в нем заморгает курсор-палочка и можно будет вводить в него текст.

Про такое состояние говорят, что инпут сейчас имеет фокус ввода. На практике это означает, что если начать вводить текст с клавиатуры, то этот текст будет попадать в тот инпут, который сейчас имеет фокус ввода. Если затем кликнуть куда-нибудь вне инпута, то этот инпут потеряет фокус ввода и в него нельзя будет вводить текст.

Для того, чтобы поймать момент получения или потери фокуса инпутом, в JavaScript предусмотрены специальные события: cобытие `focus` позволяет отловить получение фокуса инпутом, а событие `blur` - потерю. Попробуем на практике. Пусть у нас инпут:

`<input id="elem" value="text">`

Получим ссылку на него в переменную:

`let elem = document.querySelector('#elem');`

А теперь сделаем так, чтобы по получению фокуса в консоль вывелся текущий текст инпута:

`elem.addEventListener('focus', function() { console.log(elem.value); });`

Дан инпут. По получению фокуса запишите в него число `1`, а по потери фокуса - число `2`.

Дан инпут. Пусть в него вводится число. По потери фокуса выведите на экран квадрат этого числа.

Дан инпут, в котором изначально есть какой-то текст. По получению фокуса инпутом очистите содержимое этого инпута.

← →
↑
en ru