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.
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.
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;
}
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);
}
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.
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.
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.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.