Fokus pól tekstowych w JavaScript

Załóżmy, że mamy input. Możesz kliknąć na ten input i po tym zacznie migać kursor i będzie można wprowadzać do niego tekst.

O takim stanie mówi się, że input obecnie ma fokus wprowadzania. W praktyce oznacza to, że jeśli zaczniesz wprowadzać tekst z klawiatury, to ten tekst trafi do tego inputa, który ma obecnie fokus wprowadzania. Jeśli następnie klikniesz gdzieś poza inputem, to ten input straci fokus wprowadzania i nie będzie można do niego wprowadzać tekstu.

Aby przechwycić moment uzyskania lub utraty fokusu przez input, w JavaScript przewidziano specjalne zdarzenia: zdarzenie focus pozwala przechwycić uzyskanie fokusu przez input, a zdarzenie blur - utratę. Spróbujmy w praktyce. Załóżmy, że mamy input:

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

Pobierzmy referencję do niego do zmiennej:

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

A teraz zróbmy tak, aby po uzyskaniu fokusu w konsoli wyświetlił się obecny tekst inputa:

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

Dany jest input. Po uzyskaniu fokusu wpisz do niego liczbę 1, a po utracie fokusu - liczbę 2.

Dany jest input. Niech wprowadzana jest do niego liczba. Po utracie fokusu wypisz na ekran kwadrat tej liczby.

Dany jest input, w którym początkowo jest jakiś tekst. Po uzyskaniu fokusu przez input wyczyść zawartość tego inputa.