Фокус на текстови полета в JavaScript

Нека имаме input. Можете да кликнете върху този input и след това в него ще започне да мига курсор-палка и ще можете да въвеждате текст в него.

За това състояние се казва, че input в момента има фокус на въвеждане. На практика това означава, че ако започнете да въвеждате текст от клавиатурата, този текст ще попадне в този input, който в момента има фокус на въвеждане. Ако след това кликнете някъде извън input, той ще загуби фокуса на въвеждане и в него няма да може да се въвежда текст.

За да уловим момента на получаване или загуба на фокус от input, в JavaScript са предвидени специални събития: събитието focus позволява да се улови получаването на фокус от input, а събитието blur - загубата. Нека опитаме на практика. Нека имаме input:

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

Нека получим референция към него в променлива:

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

А сега нека направим така, че при получаване на фокус в конзолата да се изведе текущият текст на input:

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

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

Даден е input. Нека в него се въвежда число. При загуба на фокус изведете на екрана квадрата на това число.

Даден е input, в който първоначално има някакъв текст. При получаване на фокус от input изчистете съдържанието му.