Пусть у нас есть инпут. Вы можете нажать на этот инпут и после этого в нем заморгает курсор-палочка и можно будет вводить в него текст.
Про такое состояние говорят, что инпут сейчас имеет фокус ввода. На практике это означает, что если начать вводить текст с клавиатуры, то этот текст будет попадать в тот инпут, который сейчас имеет фокус ввода. Если затем кликнуть куда-нибудь вне инпута, то этот инпут потеряет фокус ввода и в него нельзя будет вводить текст.
Для того, чтобы поймать момент получения
или потери фокуса инпутом, в JavaScript предусмотрены
специальные события: cобытие focus
позволяет отловить получение фокуса инпутом,
а событие blur - потерю. Попробуем
на практике. Пусть у нас инпут:
<input id="elem" value="text">
Получим ссылку на него в переменную:
let elem = document.querySelector('#elem');
А теперь сделаем так, чтобы по получению фокуса в консоль вывелся текущий текст инпута:
elem.addEventListener('focus', function() {
console.log(elem.value);
});
Дан инпут. По получению фокуса запишите в
него число 1, а по потери фокуса -
число 2.
Дан инпут. Пусть в него вводится число. По потери фокуса выведите на экран квадрат этого числа.
Дан инпут, в котором изначально есть какой-то текст. По получению фокуса инпутом очистите содержимое этого инпута.