Comment afficher/masquer le mot de passe dans un input Webflow ?
Apprenez à ajouter un bouton afficher/masquer le mot de passe sur un champ Webflow avec JavaScript.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un bouton afficher/masquer sur un champ mot de passe dans Webflow.
Exemple
| Élément | Classe | Rôle |
|---|---|---|
| Input password | password-input | Champ de saisie (type=password) |
| Bouton toggle | password-toggle | Bouton œil à côté du champ |
| Icône visible | icon-show | SVG ou texte 'Afficher' |
| Icône masqué | icon-hide | SVG ou texte 'Masquer' |
1. Créez la structure dans Webflow
Créez un Div contenant un Input de type Password (classe password-input) et un bouton (classe password-toggle) côte à côte. Positionnez le bouton en absolute à droite de l'input si nécessaire.
2. Le script
document.querySelectorAll('.password-toggle').forEach(function(toggle) {
var input = toggle.closest('div').querySelector('.password-input');
if (!input) return;
var show = toggle.querySelector('.icon-show');
var hide = toggle.querySelector('.icon-hide');
if (hide) hide.style.display = 'none';
toggle.addEventListener('click', function() {
var isPassword = input.type === 'password';
input.type = isPassword ? 'text' : 'password';
if (show) show.style.display = isPassword ? 'none' : 'block';
if (hide) hide.style.display = isPassword ? 'block' : 'none';
});
});Variante simplifiée (texte seulement)
Si vous voulez juste un lien texte "Afficher / Masquer" sans icônes :
document.querySelectorAll('.password-toggle').forEach(function(toggle) {
var input = toggle.closest('div').querySelector('.password-input');
toggle.addEventListener('click', function() {
var isPass = input.type === 'password';
input.type = isPass ? 'text' : 'password';
toggle.textContent = isPass ? 'Masquer' : 'Afficher';
});
});Conclusion
Le password toggle améliore l'UX sur tous les formulaires avec mot de passe. Essentiel sur mobile où la saisie est plus sujette aux erreurs.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
