Avez-vous déjà rempli une longue case de saisie dans un formulaire Web pour vous faire dire lors de la soumission que vous avez entré trop de caractères? Si oui, vous savez combien ceci peut être frustrant.
C'est pourquoi une bonne pratique consiste à indiquer à côté de la case de saisie le nombre de caractères restants.
Je vous propose un petit algorithme JavaScript qui affiche, à côté de chaque balise éligible, le nombre de caractères entrés ainsi que la valeur indiquée dans l'attribut maxlength (ex : 56/100).
L'astuce consiste à entourer chaque champ <input type="text"> ou <textarea> par des balises précises que le JavaScript utilisera pour effectuer ses calculs puis afficher la réponses.
Tel que démontré dans cet exemple, le code fonctionne autant pour les champs vides au départ que pour ceux qui contiennent une valeur par défaut.
<div class="ligne-formulaire">
<label for="nom">* Nom :</label>
<span class="champ-avec-compteur">
<input type="text" id="nom" name="nom" maxlength="100">
<span class="caracteres-restants"></span>
</span>
</div>
<div class="ligne-formulaire">
<label for="ville">* Ville :</label>
<span class="champ-avec-compteur">
<input type="text" id="ville" name="ville" value="Victoriaville" maxlength="100">
<span class="caracteres-restants"></span>
</span>
</div>
<div class="ligne-formulaire">
<label for="ville">* Ville :</label>
<span class="champ-avec-compteur">
<textarea id="commentaire" name="commentaire" maxlength="500"></textarea>
<span class="caracteres-restants"></span>
</span>
</div>
Ce code JavaScript fera le travail :
// inspiré de https://codepen.io/NielsVoogt/pen/JjvwjEr
const champs = document.querySelectorAll(".champ-avec-compteur input[type=text][maxlength], .champ-avec-compteur textarea[maxlength]");
function calculerCaracteresRestants(champ) {
const compteur = champ.nextElementSibling; // balise qui suit le champ (devrait être <span class="caracteres-restants"></span>)
if (compteur.className === "caracteres-restants") {
compteur.innerText = `${champ.value.length}/${champ.maxLength}`;
if(champ.value.length >= champ.maxLength) {
compteur.classList.add('erreur');
} else {
compteur.classList.remove('erreur');
}
}
}
for (let champ of champs) {
calculerCaracteresRestants(champ); // affichage dès le chargement de la page si des champs étaient pré-remplis
champ.addEventListener('keyup', calculerCaracteresRestants.bind(null, champ));
}
▼Publicité
