A focus és blur metódusok a JavaScriptben

Már tudod, mi az a beviteli fókusz. Azt is tudod, hogyan állítható be vagy veszíthető el a fókusz: a beállításhoz egy beviteli mezőbe kell kattintani, az elvesztéséhez pedig máshova.

A JavaScriptben azonban léteznek speciális metódusok, amelyek lehetővé teszik a fókusz kényszerített beállítását egy inputmezőbe, vagy annak eltávolítását onnan. Ezek a focus és blur metódusok.

Nézzük meg a működésüket egy példán keresztül. Tegyük fel, hogy van egy inputmezőnk és egy gombunk:

<input id="elem" value="text">
<input type="submit" id="button">

A gomb megnyomására állítsuk be a beviteli fókuszt az inputmezőnkre:

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

button.addEventListener('click', function() {
	elem.focus();
});

Adott két inputmező. Úgy kell elrendezni, hogy két karakter beírása után a beviteli fókusz a második inputmezőre ugrasson, és miután ebben a mezőben is két karaktert írtunk be, a fókusz eltávolíttassék róla.