Tekstiväljade fookus JavaScriptis

Oletame, et meil on tekstiväli. Saate vajutada sellele tekstiväljale ja pärast seda hakkab selles vilkuma kursor ja saate seda teksti sisestama.

Sellise oleku kohta öeldakse, et tekstiväli on praegu sisestusfookuses. Praktikas tähendab see, et kui hakata klaviatuurilt teksti sisestama, siis see tekst satub sellesse tekstivälja, mis on praegu fookuses. Kui seejärel klikkida kuhugi väljaspool tekstivälja, siis see tekstiväli kaotab fookuse ja sellesse ei ole võimalik teksti sisestada.

Et tabada momenti, mil tekstiväli saab fookuse või kaotab selle, on JavaScriptis ette nähtud spetsiaalsed sündmused: sündmus focus võimaldab tabada fookuse saamist tekstivälja poolt, ning sündmus blur - fookuse kaotamist. Proovime seda praktikas. Oletame, et meil on tekstiväli:

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

Võtame selle viida muutujasse:

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

Ja nüüd teeme nii, et fookuse saamise korral väljastatakse konsooli tekstivälja praegune väärtus:

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

Antud on tekstiväli. Fookuse saamisel kirjutage sellesse number 1, ja fookuse kaotamisel - number 2.

Antud on tekstiväli. Sisestage sellesse number. Fookuse kaotamisel kuvage ekraanil selle numbri ruut.

Antud on tekstiväli, milles algselt on mingi tekst. Fookuse saamisel tekstivälja poolt tühjendage selle tekstivälja sisu.