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 !
1ère étape
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.
2ème étape
Stylisons notre input.
input {
background: #131416;
color: white;
border: 2px solid #FF4754;
border-radius: .2rem;
outline: none;
font-size: 1em;
padding: 20px 19px;
}
3ème étape
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;
}
4ème étape
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.
