Focus des champs de texte en JavaScript
Supposons que nous ayons un champ de saisie. Vous pouvez cliquer sur ce champ et après cela, un curseur en forme de bâtonnet clignotera à l'intérieur et il sera possible d'y saisir du texte.
On dit d'un tel état que le champ de saisie a actuellement le focus de saisie. En pratique, cela signifie que si l'on commence à saisir du texte au clavier, ce texte ira dans le champ de saisie qui a actuellement le focus. Si ensuite on clique en dehors du champ, celui-ci perdra le focus de saisie et il ne sera plus possible d'y saisir du texte.
Pour capturer le moment où un champ de saisie
reçoit ou perd le focus, JavaScript fournit
des événements spéciaux : l'événement focus
permet de détecter l'obtention du focus par le champ,
et l'événement blur - la perte de celui-ci. Essayons
en pratique. Supposons que nous ayons un champ de saisie :
<input id="elem" value="text">
Récupérons une référence vers celui-ci dans une variable :
let elem = document.querySelector('#elem');
Et maintenant, faisons en sorte qu'à l'obtention du focus, le texte actuel du champ soit affiché dans la console :
elem.addEventListener('focus', function() {
console.log(elem.value);
});
Un champ de saisie est donné. À l'obtention du focus, écrivez
dedans le nombre 1, et à la perte du focus -
le nombre 2.
Un champ de saisie est donné. Supposons qu'un nombre y soit saisi. À la perte du focus, affichez à l'écran le carré de ce nombre.
Un champ de saisie est donné, dans lequel il y a initialement du texte. Lorsque le champ obtient le focus, effacez son contenu.
