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';
  });
});

bon à savoir

Ajoutez aria-label='Afficher le mot de passe' sur votre bouton toggle pour l'accessibilité. Mettez à jour l'aria-label dynamiquement dans le script selon l'état (Afficher/Masquer). Les lecteurs d'écran annonceront l'action disponible, rendant le formulaire accessible aux utilisateurs non-voyants.

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.

Comment afficher/masquer le mot de passe dans un input Webflow ?

Exemple

1. Créez la structure dans Webflow

2. Le script

Variante simplifiée (texte seulement)

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires