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:

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

Pobierzmy referencję do niego do zmiennej:

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

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

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