Tekstikenttien fokus JavaScriptissä

Oletetaan, että meillä on syöttökenttä. Voit napsauttaa tätä syöttökenttää, minkä jälkeen siinä vilkkuu sauhakursori ja voit kirjoittaa siihen tekstiä.

Tästä tilasta sanotaan, että syöttökentällä on parhaillaan syötteen fokus. Käytännössä tämä tarkoittaa, että jos aloitat tekstin kirjoittamisen näppäimistöllä, niin teksti menee siihen syöttökenttään, jolla on parhaillaan fokus. Jos sitten napsautat jonnekin syöttökentän ulkopuolelle, niin syöttökenttä menettää syötteen fokuksen eikä siihen voi enää kirjoittaa tekstiä.

Jotta voisimme havaita hetken, kun syöttökenttä saa tai menettää fokuksen, JavaScriptissä on tarjolla erityiset tapahtumat: Tapahtuma focus mahdollistaa syöttökentän fokuksen saamisen havaitsemisen, ja tapahtuma blur - fokuksen menettämisen. Kokeillaan käytännössä. Oletetaan, että meillä on syöttökenttä:

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

Saadaan viitta siihen muuttujaan:

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

Ja nyt tehdään niin, että fokuksen saamisen yhteydessä konsoliin tulostetaan syöttökentän nykyinen teksti:

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

Annettu syöttökenttä. Fokuksen saamisen yhteydessä kirjoita siihen numero 1, ja fokuksen menettämisen yhteydessä - numero 2.

Annettu syöttökenttä. Oletetaan, että siihen syötetään numero. Fokuksen menettämisen yhteydessä tulosta ruudulle tämän numeron neliö.

Annettu syöttökenttä, jossa on aluksi jotain tekstiä. Fokuksen saamisen yhteydessä tyhjennä tämän syöttökentän sisältö.