Snippet : afficher ou masquer un mot de passe en JavaScript
Voici un snippet simple pour ajouter un bouton afficher ou masquer le mot de passe dans un formulaire de connexion ou d’inscription.
Pourquoi utiliser ce snippet
Sur un formulaire de connexion ou d’inscription, il est souvent utile de permettre à l’utilisateur de :
- voir ce qu’il tape
- éviter les fautes de saisie
- améliorer l’expérience utilisateur
C’est une petite fonctionnalité, mais franchement très pratique.
Parce que taper un mot de passe de 28 caractères avec un symbole sorti d’une dimension parallèle, puis se tromper à la fin, c’est le genre de mini souffrance qu’on peut éviter.
Le code HTML
<label for="password">Mot de passe</label>
<div class="password-box">
<input type="password" id="password" name="password" placeholder="Votre mot de passe">
<button type="button" id="togglePassword">Afficher</button>
</div>
Le code CSS
.password-box {
display: flex;
align-items: center;
gap: 10px;
}
.password-box input {
padding: 10px;
}
.password-box button {
padding: 10px 14px;
cursor: pointer;
}
Le code JavaScript
const passwordInput = document.getElementById("password");
const togglePassword = document.getElementById("togglePassword");
togglePassword.addEventListener("click", function () {
if (passwordInput.type === "password") {
passwordInput.type = "text";
togglePassword.textContent = "Masquer";
} else {
passwordInput.type = "password";
togglePassword.textContent = "Afficher";
}
});
Comment ça fonctionne
Le principe est simple :
- le champ est au départ en type
password - quand on clique sur le bouton, il passe en type
text - le mot de passe devient visible
- un second clic remet le champ en mode masqué
Le texte du bouton change aussi automatiquement entre Afficher et Masquer.
Où utiliser ce snippet
Ce snippet peut être ajouté sur :
- une page de connexion
- une page d’inscription
- un formulaire de changement de mot de passe
- un espace membre
C’est un petit détail, mais ça donne un côté plus propre et plus moderne à un formulaire.
Le bouton afficher ou masquer le mot de passe est un snippet simple, utile et rapide à intégrer. Avec un peu de HTML, de CSS et de JavaScript, tu améliores immédiatement le confort d’utilisation de ton formulaire.
