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

Няхай у нас ёсць інпут. Вы можаце націснуць на гэты інпут і пасля гэтага ў ім замігае курсор-палачка і можна будзе ўводзіць у яго тэкст.

Пра такі стан кажуць, што інпут зараз мае фокус уводу. На практыцы гэта азначае, што калі пачаць уводзіць тэкст з клавіятуры, то гэты тэкст будзе трапляць у той інпут, які зараз мае фокус уводу. Калі затым клікнуць куды-небудзь па-за інпутам, то гэты інпут страціць фокус уводу і ў яго нельга будзе ўводзіць тэкст.

Для таго, каб злавіць момант атрымання або страты фокусу інпутам, у JavaScript прадугледжаныя спецыяльныя падзеі: падзея focus дазваляе адлавіць атрыманне фокусу інпутам, а падзея blur - страту. Паспрабуем на практыцы. Няхай у нас інпут:

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

Атрымаем спасылку на яго ў зменную:

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

А зараз зробім так, каб па атрыманні фокусу ў кансоль выводзіўся бягучы тэкст інпута:

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

Дадзены інпут. Па атрыманні фокусу запішыце ў яго лік 1, а па страце фокусу - лік 2.

Дадзены інпут. Няхай у яго ўводзіцца лік. Па страце фокусу выведзіце на экран квадрат гэтага ліку.

Дадзены інпут, у якім першапачаткова ёсць які-небудзь тэкст. Па атрыманні фокусу інпутам ачысціце змесціва гэтага інпута.