Tekstveld focus in JavaScript

Stel we hebben een invoerveld. Je kunt op dit invoerveld klikken en daarna zal de cursor knipperen en kun je er tekst in invoeren.

Van deze toestand wordt gezegd dat het invoerveld op dit moment invoerfocus heeft. In de praktijk betekent dit dat als je tekst begint in te voeren via het toetsenbord, deze tekst terechtkomt in het invoerveld dat op dat moment de focus heeft. Als je vervolgens ergens buiten het invoerveld klikt, zal dit invoerveld de focus verliezen en kan er geen tekst meer in worden ingevoerd.

Om het moment van verkrijgen of verliezen van focus door een invoerveld op te vangen, zijn er in JavaScript speciale gebeurtenissen: de gebeurtenis focus maakt het mogelijk om het verkrijgen van focus door een invoerveld op te vangen, en de gebeurtenis blur - het verlies. Laten we het in de praktijk proberen. Stel we hebben een invoerveld:

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

Laten we een referentie eraan in een variabele krijgen:

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

En laten we nu regelen dat bij het verkrijgen van focus de huidige tekst van het invoerveld in de console wordt gelogd:

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