Afficher / Cacher sur un champ de mot de passe

Le formulaire de connexion est le formulaire que nous retrouvons le plus sur les sites internet. Créer un formulaire de connexion qui donne le choix à l'utilisateur d'afficher ou de cacher son mot de passe est donc un élément qui améliorera considérablement la vie de vos utilisateurs. Voyons dans cet article comment faire !

Envie de voir le code en live ?

Rendez-vous directement sur ce lien : démonstration

1ère étape

Pour commencer écrivons notre code HTML Le code est simple.

<label>
  <input type="password" placeholder="Mot de passe">

  <div class="password-icon">
    <i data-feather="eye"></i>
    <i data-feather="eye-off"></i>
  </div>
</label>

<!-- ICON SCRIPT -->
<script src="https://unpkg.com/feather-icons"></script>
<script>
  feather.replace();
</script>

Dans l’étape précédente, nous utilisons unpkg et sa collection d’icônes.

C’est une solution rapide pour facilement mettre des icônes : eye et eye-off qui sont les icônes qui nous permettent d’afficher un oeil et un oeil barré.

2ème étape

Stylisons maintenant le label et l'input.

label {
  position: relative;
}

label input {
  font-size: 1em;
  color: #f9f9f9;
  background: transparent;
  padding: 1rem 1.2rem;
  width: 350px;
  border-radius: 5px;
  border: 2px solid #7a7a7a;
  transition: all 0.2s;
}

Rien de compliqué ici. On donne une position "relative" à notre classe label afin de positionner nos icônes plus facilement. Nous stylisons ensuite notre champ de formulaire de mot de passe.

On définie par exemple des bordures arrondies avec border-radius avant de donner des couleurs de fond et au texte.

3ème étape

Stylisons maintenant l'input au focus / clic.

label input:focus {
  border-color: #ff4754;
}

Lorsque notre utilisateur clique sur le champ de formulaire, il aura ainsi une bordure de couleur.

4ème étape

Nous devons maintenant styliser l'icône Afficher et Cacher.

label .password-icon {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 20px;
  color: #f9f9f9;
  transition: all 0.2s;
}

De la même manière rien de compliqué ici : on définit une propriété transform qui va décaler de 50% notre icône avec translateY au niveau horizontal. En faisant ça, notre icône restera alignée au centre à droite du champ de formulaire.

5ème étape

Stylisons maintenant l'icône au survol et cachons l'icône de l'oeil barré pour ne laisser que l'icône de l'oeil "normal".

label .password-icon:hover {
  cursor: pointer;
  color: #ff4754;
}

label .password-icon .feather-eye-off {
  display: none;
}

La classe .feather-eye-off est une classe générée automatiquement par la collection d'icône que nous avons importé.

6ème étape

Passons au JavaScript et sélectionnons les éléments.

const eye = document.querySelector(".feather-eye");
const eyeoff = document.querySelector(".feather-eye-off");
const passwordField = document.querySelector("input[type=password]");

Nous sélectionnons les deux classes créées par unpkg / feather et l’input de type password pour ensuite pouvoir détecter les clics et transformer le type de l’input.

7ème étape

Détectons maintenant le clic sur l'oeil et sur l'oeil barré.

eye.addEventListener("click", () => {
  eye.style.display = "none";
  eyeoff.style.display = "block";
  passwordField.type = "text";
});

eyeoff.addEventListener("click", () => {
  eyeoff.style.display = "none";
  eye.style.display = "block";
  passwordField.type = "password";
});

Lorsque l’utilisateur vient cliquer sur l’oeil, alors on cache l’icône de l’oeil “normale” et on affiche l’icône de l’oeil “barré”.

Nous en profitons pour changer le type de l’input de “password” à “text”.

Enfin, nous faisons l’inverse pour pouvoir revenir à un input “caché”.

Si vous voulez maîtrisez complètement le JavaScript pour faire bien plus qu'afficher / cacher un mot de passe sur un champ de formulaire (input), nous vous invitons grandement à suivre notre formation JavaScript complète immédiatement : apprendre le JavaScript