Focus- ja blur-metodit JavaScriptissä

Tiedät jo, mikä syötteen kohdistus on. Sinä tiedät myös kuinka asettaa tai poistaa kohdistus: asettaaksesi sinun täytyy klikata syötekenttään, ja poistaaksesi - johonkin muualle.

JavaScriptissä on kuitenkin olemassa erityisiä metodeja, joiden avulla voidaan pakottaa kohdistuksen asettaminen syötekenttään tai sen poistaminen sieltä. Nämä ovat metodit focus ja blur.

Katsotaanpa niiden toimintaa esimerkin avulla. Olkoon meillä tällainen syötekenttä ja painike:

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

Asetetaan painikkeen klikkauksella kohdistus meidän syötekenttäämme:

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

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

Annettuina on kaksi syötekenttää. Tee niin, että kahden merkin syöttämisen jälkeen kohdistus siirtyy toiseen syötekenttään, ja kahden merkin syöttämisen jälkeen tähän syötekenttään - kohdistus poistuu siitä.