Tuto Javascript

Compteur de caractères HTML Javascript

Comment créer un compteur de caractères en HTML et Javascript? Un formulaire HTML est composé de balises de type input ou textarea contenant des valeurs textuelles, numériques (ou caractères et symboles spéciaux comme les espaces blancs, tabulations, points, signes...) ainsi qu'un bouton pour valider formulaire et récupérer ces données dans une base de donnée, un tableau Excel, une page word ou bien dans une autre page web. Il est parfois nécessaire de limiter le nombre de caractères (exemple: pseudo et mots de passe) dans ces balises grâce à la propriété "maxlength" (qui signifie taille maximum). Afin de respecter ces normes et que l'utilisateur sache le nombre de caractères qui lui reste à taper, certains programmes en ligne ont mis en place un compteur de caractères dégressif. Dans l'exemple suivant la fonction Javascript displayCounter() est exécutée à partir d'un listener placé sur les balises input et textarea et s'exécute à condition que l'un de ces deux éléments soit activé lors d'une saisie de texte et seulement à condition qu'il reste moins de 15 caractères à taper avant d'atteindre la taille maximum paramétrée dans la propriété "maxlength". Il est possible de paramétrer les propriétés css du compteur ainsi que son temps d'affichage (1500 ms par défaut). Il suffit donc de placer le code javascript au bas de n'importe quelle page web contenant un formulaire pour voir apparaitre le compteur de mots ou de nombres lors de la saisie.

Créer un compteur de caractères HTML Javascript

<!DOCTYPE html>
<html>
<head>
<title>Compteur de caractères HTML Javascript</title>
</head>
    <body>
        <input type="text" maxlength="20"><br>
        <textarea type="text" maxlength="20"></textarea>
        <script>
            textareas = document.querySelectorAll("textarea");
            inputs = document.querySelectorAll("input");

            function displayCounter () {
                let target = event.currentTarget;
                if (target.hasAttribute("maxlength")) { 
                    let maxLength = target.getAttribute("maxlength");
                    let currentLength = target.value.length;
                    
                    if(document.getElementById("compteur") != null){
                        document.getElementById("compteur").remove();
                    }
                    
                    let div = document.createElement("div");
                    div.setAttribute("id", "compteur");
                    div.setAttribute("style", "color:#ff9074;font-size:11px;"); 
                    target.after(div);
                    if (parseInt(maxLength - currentLength) < 15) {
                        document.getElementById('compteur').innerHTML = "\rReste " + parseInt(maxLength - currentLength) + " caractères";
                    }
                    setTimeout(function(){
                        if(document.getElementById("compteur") != null){
                            document.getElementById("compteur").remove();
                        }
                    }, 1500);
                }
            }

            for (let i = 0; i < textareas.length; i++) {
                textareas[i].addEventListener("input", function() {
                    displayCounter();
                });
            }

            for (let i = 0; i < inputs.length; i++) {
                inputs[i].addEventListener("input", function() {
                    displayCounter();
                });
            }
        </script>
    </body>
</html>