Teksta lauku fokuss JavaScript

Pieņemsim, ka mums ir ievades lauks. Jūs varat noklikšķināt uz šī ievades lauka un pēc tam tajā sāks mirgot kursors, un jūs varēsiet ievadīt tajā tekstu.

Par šādu stāvokli saka, ka ievades laukam šobrīd ir ievades fokuss. Praksē tas nozīmē, ka, sākot ievadīt tekstu no klaviatūras, šis teksts nonāks tajā ievades laukā, kuram šobrīd ir fokuss. Ja pēc tam noklikšķināt kaut kur ārpus ievades lauka, tad šis ievades lauks zaudēs fokusu, un tajā vairs nevarēs ievadīt tekstu.

Lai noķertu brīdi, kad ievades lauks iegūst vai zaudē fokusu, JavaScript ir paredzēti īpaši notikumi: notikums focus ļauj noķert fokusa iegūšanu, bet notikums blur - zaudēšanu. Pamēģināsim praktiski. Pieņemsim, ka mums ir ievades lauks:

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

Iegūsim tam atsauci mainīgajā:

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

Un tagad darīsim tā, lai, iegūstot fokusu, konsolē tiktu izvadīts ievades lauka esošais teksts:

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

Dots ievades lauks. Iegūstot fokusu, ierakstiet tajā skaitli 1, bet zaudējot fokusu - skaitli 2.

Dots ievades lauks. Ievadiet tajā skaitli. Zaudējot fokusu, izvadiet ekrānā šī skaitļa kvadrātu.

Dots ievades lauks, kurā sākotnēji ir kāds teksts. Iegūstot fokusu, notīriet šī ievades lauka saturu.