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:
<input id="elem" value="text">
Laten we een referentie eraan in een variabele krijgen:
let 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:
elem.addEventListener('focus', function() {
console.log(elem.value);
});
Gegeven een invoerveld. Schrijf bij het verkrijgen van focus
het getal 1 erin, en bij het verlies van focus -
het getal 2.
Gegeven een invoerveld. Er wordt een getal ingevoerd. Bij het verlies van focus, geef het kwadraat van dit getal weer op het scherm.
Gegeven een invoerveld waarin aanvankelijk een bepaalde tekst staat. Wis de inhoud van dit invoerveld wanneer het de focus verkrijgt.
