Focus en blur methoden in JavaScript

Je weet al wat invoerfocus is. Je weet ook hoe je focus moet instellen of verliezen: om focus in te stellen moet je op een invoerveld klikken, en om het te verliezen - op een andere plaats.

In JavaScript bestaan er echter speciale methoden die het mogelijk maken om geforceerd focus in een invoerveld in te stellen of eruit te halen. Dit zijn de methoden focus en blur.

Laten we hun werking bekijken aan de hand van een voorbeeld. Stel we hebben het volgende invoerveld en knop:

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

Laten we bij het klikken op de knop de invoerfocus in ons invoerveld instellen:

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

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

Er zijn twee invoervelden. Zorg ervoor dat na het invoeren van twee tekens de invoerfocus overgaat naar het tweede invoerveld, en na het invoeren van twee tekens in dit invoerveld - de focus ervan wordt verwijderd.