тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Фокус текстовых полей в 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.

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

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