Afficher mot de passe dans un formulaire

Que ce soit pour un formulaire de connexion, d’inscription ou autre, il est important de cacher les mots de passe et données sensibles des utilisateurs. HTML nous a facilité la vie en mettant à disposition un input type “password”. Cela nous permet de masquer les données par des astérisques. Voyons ensemble une fonction jQuery maison nous permettant d’afficher le mot de passe dans un formulaire.

Le fonction est simple. Nous allons mettre en place un lien, qui va permettre en javascript de modifier le type de l’input, passant ainsi de “password” à “text” et vice versa.

HTML

Le code HTML ne peut être plus simple. Nous mettons en place un input de type password, puis un span avec une classe particulière. Cette classe nous permettra alors de pouvoir sélectionner facilement le texte.

 

CSS

Rien de bien compliqué. J’ai assigné une taille minimale à l’input pour notre exemple. Le texte lui est en position absolute pour être présent dans l’input. En fonction de votre police et de votre feuille CSS déjà en place, vous pourrez alors faire des ajustements avec le margin.

 

jQuery

Au clic sur l’un des textes permettant d’afficher le mot de passe, nous vérifions le statut de l’input le plus proche. Si cet input est de type password, alors nous le transformons en texte et nous modifions le message “Afficher” par “Cacher”. Sinon, nous effectuons l’inverse.

 

Démonstration

 

Rémi on twitterRémi on linkedin
Rémi
Chargé de projets web de profession, je partage à travers ce blog mes expériences, recherches et découvertes dans la création de projet web.
  • Tim Tim

    je n’arrive pas à insérer le code sur les pages
    je ne sais pas comment faire
    pouvez-vous m’aidez ?

  • Trop Freshloïc

    Merci article bien expliqué