Que ce soit pour vos formulaires d'inscription ou de connexion, ou même sur vos pages de changement de mots de passe, prévenir votre utilisateur lorsqu'il utilise la touche majuscule de son clavier améliorera considérablement son expérience sur votre site. Découvrons dans cet article comment réaliser ceci très facilement !
Le code HTML.
<input type="text"
placeholder="Mot de passe">
<span id="message">
<i data-feather="alert-triangle"></i>
Touche majuscule activée
</span>
<script src="https://unpkg.com/feather-icons">
</script>
<script>feather.replace()</script>
Pour réaliser notre message nous notifiant que nous nous avons la touche majuscule activée, nous souhaitons ajouter une icône.
Pour utiliser facilement une icône, nous utilisons feather icons.
Ce que nous faisons est très simple : nous utilisons un attribut original : data-feather
qui contient la valeur de l’icône que nous souhaitons ajouter à notre message.
Puis nous éxecutons le code JavaScript avec la fonction replace()
afin qu’il détecte la classe et qu’il la remplace par une icône au format SVG.
Stylisons notre input.
input {
background: #131416;
color: white;
border: 2px solid #FF4754;
border-radius: .2rem;
outline: none;
font-size: 1em;
padding: 20px 19px;
}
Occupons-nous du message.
#message {
color: #FF4754;
display: none; /* nous changerons avec JavaScript */
align-items: center;
justify-content: center;
margin-top: 15px;
}
#message svg {
margin-right: 10px;
}
Il ne nous reste plus qu'à détecter la touche majuscule.
const capsMessage = document.querySelector('#message');
window.addEventListener('keyup', event => {
if (event.getModifierState('CapsLock')) {
capsMessage.style.display = 'flex';
} else {
capsMessage.style.display = 'none';
}
});
Dans l’étape précédente, nous sélectionnons dans un premier temps notre id message.
Ensuite, nous ajoutons l’événement keyup qui permet de détecter chaque fois qu’une touche du clavier est relevée (donc appuyée).
Grâce à getModifierState
nous allons vérifier si la touche majuscule a été bloquée grâce à CapsLock.
Si c’est le cas nous affichons notre message en modifiant la valeur de display à flex, sinon on cache notre message en s’assurant que la valeur de display est égale à none.
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.