Teksto laukų fokusas JavaScript

Tarkime, mes turime įvesties lauką. Galite paspausti šį įvesties lauką ir po to jame mirksės žymeklio lazdelė ir galėsite į jį įvesti tekstą.

Apie tokią būseną sakoma, kad įvesties laukas šiuo metu turi įvesties fokusą. Praktiškai tai reiškia, kad jei pradėsite vesti tekstą iš klaviatūros, tas tekstas pateks į tą įvesties lauką, kuris šiuo metu turi įvesties fokusą. Jei tada spustelėsite kur nors už įvesties lauko ribų, tas įvesties laukas praras įvesties fokusą ir į jį nebegalėsima vesti teksto.

Norint pagauti įvesties lauko gavimo ar praradimo fokusą momentą, JavaScript yra numatyti specialūs įvykiai: įvykis focus leidžia pagauti įvesties lauko fokuso gavimą, o įvykis blur - praradimą. Išbandykime praktiškai. Tarkime, mes turime įvesties lauką:

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

Gaukime nuorodą į jį į kintamąjį:

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

O dabar padarykime taip, kad gavus fokusą į konsolę būtų išvestas dabartinis įvesties lauko tekstas:

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

Duotas įvesties laukas. Gavus fokusą įrašykite į jį skaičių 1, o praradus fokusą - skaičių 2.

Duotas įvesties laukas. Tegul į jį įvedamas skaičius. Praradus fokusą išveskite į ekraną šio skaičiaus kvadratą.

Duotas įvesties laukas, kuriame iš pradžių yra kažkoks tekstas. Gavus įvesties lauko fokusą išvalykite šio įvesties lauko turinį.