Caractères restants — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 8)

Caractères restants

Événements et formulaires · niveau 1 (application)

Énoncé

Un champ d'avis <textarea maxlength="140"> est suivi d'un paragraphe qui indique, pendant la frappe, le nombre de caractères restants (« 125 caractères restants », « 1 caractère restant »), en rouge sous 10. Écrire le script, en lisant la limite dans l'attribut maxlength. Quel attribut donner au paragraphe pour qu'un lecteur d'écran l'annonce ?

Corrigé


const avis = document.querySelector("#avis");
const reste = document.querySelector("#reste");
const MAX = Number(avis.maxLength);

avis.addEventListener("input", () => {
  const n = MAX - avis.value.length;
  reste.textContent = `${n} caractère${n > 1 ? "s" : ""} restant${n > 1 ? "s" : ""}`;
  reste.classList.toggle("erreur", n < 10);
  console.log(reste.textContent);
});

En remplissant le champ avec 15, 139 puis 140 caractères :


125 caractères restants
1 caractère restant
0 caractère restant

avis.maxLength lit l'attribut sous forme de nombre. Le paragraphe porte aria-live="polite" : le lecteur d'écran annonce ses changements quand l'utilisateur fait une pause. Le champ y est relié par aria-describedby, pour que la limite soit annoncée dès l'arrivée dans le champ.