3.0 Interaction avec une touche du clavier

Objectif :

L’objectif de cet exercice est d'isoler l'action d'ajout à la liste. Ensuite, on va faire en sorte qu'à chaque fois qu’un article est ajouté à la liste via le bouton “Ajouter”, le curseur soit automatiquement replacé dans le champ de texte. Cela permet à l’utilisateur de continuer à ajouter des articles sans avoir à cliquer à nouveau dans le champ de saisie.

Résumé du code JavaScript déjà en place :

const form = document.getElementById('monForm');
const monField = document.getElementById('monField');
const maList = document.getElementById('itemList');
const noItems = document.getElementById('listEmpty');

// Gérer la soumission du formulaire
form.addEventListener('submit', function(event) {
    event.preventDefault(); // Empêche le rechargement de la page

    const item = monField.value.trim(); // Récupère l'article saisi

    if (item) {
        const listItem = document.createElement('li');
        listItem.textContent = item;
        maList.appendChild(listItem); // Ajoute l'élément à la liste visuellement
        monField.value = ''; // Vide le champ de saisie
    }

    toggleNoItems(); // Met à jour l'affichage du message "Pas d'articles"
});

1. Création d'une fonction propre à l'ajout des <li>

On va commencer par isoler les éléments qui permettent l'ajout à la liste. Ce qui va nous permettre d'executer les mêmes actions avec deux interactions différentes : une fois au clique sur 'ajouter' et une fois lorsqu'on presse 'Enter'.

Pour se faire :

1. On créer une nouvelle function addItemToList(event) {}

2. Dans cette fonction, on va venir mettre tout ce qui nous permet d'ajouter notre élément à la liste soit :

   event.preventDefault(); // Empêche le comportement par défaut (soumission du formulaire ou autre)
   
   const item = field.value.trim(); // Récupère et nettoie la saisie
   
   if (item) { // Vérifie que le champ n'est pas vide
       const listItem = document.createElement('li');
       listItem.textContent = item; // Ajoute l'article au nouvel élément <li>
       list.appendChild(listItem); // Ajoute l'élément <li> à la liste <ul>
       field.value = ''; // Vide le champ de saisie
       field.focus(); // Remet le focus dans le champ de saisie
   }
   
   toggleNoItems(); // Met à jour l'affichage du message "Pas d'articles"

3. On va à présent dans la fonction form.addEventListener('submit',); faire appel à la fonction addItemToList pour qu'à chaque clique on ajoute notre élément.

2. Ajouter l'option focus()

Maintenant que tu as isolé l’action d’ajout dans une fonction addItemToList(), il est temps d’ajouter le comportement de focus pour remettre automatiquement le curseur dans le champ de saisie après chaque ajout d’article. Ce comportement améliore l’expérience utilisateur en le guidant naturellement vers l’ajout de nouveaux éléments.

On va s'interesser à l'élément focus() pour obtenir ce qu'on souhaite. -> tu peux voir la doc officiel ici

À faire :

1. Juste après avoir vider ta liste monField.value = ''; on va ajouter :
   • monField.focus();

Et c'est tout pour cette partie-là :)