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ą:

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

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

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

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

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