Fokus van teksvelde in JavaScript
Gestel ons het 'n invoerveld. Jy kan op hierdie invoerveld klik en daarna sal die flikkerende kursor verskyn en jy sal teks daarin kan invoer.
Van hierdie toestand word gesê dat die invoerveld tans invoerfokus het. In die praktyk beteken dit dat as jy teks op die sleutelbord begin intik, sal hierdie teks in daardie invoerveld verskyn wat tans die fokus het. As jy dan êrens buite die invoerveld klik, sal hierdie invoerveld sy fokus verloor en dit sal nie moontlik wees om daarin teks in te voer nie.
Om die oomblik van verkryging
of verlies van fokus deur die invoerveld vas te vang, is daar in JavaScript
spesiale gebeurtenisse voorsien: die gebeurtenis focus
laat jou toe om die verkryging van fokus deur die invoerveld vas te vang,
en die gebeurtenis blur - die verlies daarvan. Kom ons probeer
in die praktyk. Gestel ons het 'n invoerveld:
<input id="elem" value="text">
Laat ons 'n verwysing daarna in 'n veranderlike kry:
let elem = document.querySelector('#elem');
En laat ons nou sorg dat by die verkryging van fokus die huidige teks van die invoerveld na die konsole uitgevoer word:
elem.addEventListener('focus', function() {
console.log(elem.value);
});
Gegee 'n invoerveld. By die verkryging van fokus, skryf die getal
1 daarin, en by die verlies van fokus -
die getal 2.
Gegee 'n invoerveld. Gestel 'n getal word daarin ingevoer. By die verlies van fokus, vertoon die kwadraat van hierdie getal op die skerm.
Gegee 'n invoerveld, waarin daar aanvanklik een of ander teks is. By die verkryging van fokus deur die invoerveld, maak die inhoud van hierdie invoerveld skoon.
