Créer un compteur de caractères dans un input

Que ce soit pour le choix d'un pseudo ou pour tout autre donnée importante, vous avez peut-être besoin de limiter le nombre de caractère que vos utilisateurs peuvent entrer dans un champ de formulaire. Voyons ensemble dans cet article comment réaliser ceci de manière simple et efficace.

1ère étape

Le code HTML.

<label>
  <input type="text" placeholder="Titre" maxlength=20>
  <span></span>
</label>

Nous disposons seulement un label englobant une balise input et un span.

2ème étape

Il est maintenant grand temps de styliser le label et l'input.

label {
  position: relative;
}

input {
  font-size: 1.4rem;
  padding: .8rem 2rem .8rem 0;
  background: transparent;
  color: #F5F8FF;
  border-bottom: 1.5px solid rgba(245, 248, 255, .4);
  transition: all .4s;
  outline: none;
}

3ème étape

Occupons-nous du style de l'input au focus et du placeholder.

input:focus {
  border-color: #FF4754;
}

input::placeholder {
  color: rgba(245, 248, 255, .4);
}

4ème étape

Stylisons le compteur (span).

label span {
  position: absolute;
  right: 0;
  top: 50%;

  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: .8rem;
  color: #F5F8FF;
  background: rgba(245, 248, 255, .2);
  border-radius: 5px;
}

Dans cette étape, nous plaçons notre compteur en position absolute et nous le positionnons parfaitement au centre grâce à la propriété transform, qui va pousser le compteur vers le haut en prenant la moitié de sa taille (50%).

Enfin nous utilisons flexbox (display: flex) pour centrer horizontalement et verticalement le nombre de caractères à afficher.

5ème étape

Récuperons enfin les éléments nécessaires à notre compteur avec JavaScript.

const input = document.querySelector('input');
const counter = document.querySelector('label span');
const maxLength = input.getAttribute('maxlength');

Nous récupérons la valeur de l’attribut maxlength pour l’afficher dans la balise span.

6ème étape

Il ne reste plus qu'à détecter un changement dans le nombre de caractères.

input.addEventListener('input', event => {
  const valueLength = event.target.value.length;
  const leftCharLength = maxLength - valueLength;

  if (leftCharLength < 0) return;
  counter.innerText = leftCharLength;
});

Pour s’assurer de ne pas afficher un nombre de caractères négatifs, nous terminons la fonction avec un simple return.