Une zone de saisie limite les messages à 280 caractères

<textarea id="msg" maxlength="300"></textarea>
<p id="reste">280 caracteres restants</p>

1.

const msg = document.getElementById("msg");
const reste = document.getElementById("reste");

msg.addEventListener("input", function () {
    const n = 280 - msg.value.length;
    reste.textContent = n + " caracteres restants";
    if (n < 0) {
        reste.style.color = "red";
    } else {
        reste.style.color = "black";
    }
});

2. Deux raisons, et la seconde est la plus grave :

• keydown survient avant que le caractère soit inséré dans le champ. Le compte serait donc systématiquement décalé d'une unité — un défaut qui ne se voit qu'en comptant, jamais en regardant ;
• keydown rate tout ce qui ne passe pas par le clavier : un collage à la souris, un glisser-déposer, une saisie vocale, une suggestion du téléphone. L'événement input signifie « le contenu a changé », quelle qu'en soit la cause. C'est exactement ce que l'on veut surveiller.

3. Deux problèmes.

• Il contredit la règle annoncée. L'utilisateur peut saisir jusqu'à $300$ caractères alors que le message dit $280$ : entre les deux, il voit un compte négatif en rouge sans que rien ne l'arrête. Deux nombres, deux vérités.
• Il ne protège rien. maxlength est une contrainte de la page, donc du client : elle disparaît si l'on envoie la requête autrement. Le serveur doit vérifier la longueur lui-même, et c'est lui qui décide de la vraie limite.

À retenir : la limite affichée, la limite du champ et la limite vérifiée par le serveur doivent être le même nombre — écrit une seule fois, côté serveur, et transmis à la page.