jQuery - Montrer-cacher le mot de passe

Ce billet montre comment ajouter l'interaction permettant de montrer/cacher un mot de passe dans un formulaire d'identification
NB1 : mais cela peut facilement être appliqué à n'importe quel contenu.
enlightenedNB2 : laisser votre pointeur de souris sur les textes  précédés de l'ampoule et de couleur rouge pour obtenir une information complémentaire.
Comme à chaque fois qu'il y a interaction, il y a un script en javascript et utilisation de jQuery. Le plugin "ShowHidePassword" réalise cette intraction spécifique.

La page à réaliser est articulée à partir des 3 fichiers habituel :

Les 2 images ci-dessous sont produites lors de l'exécution de la page en réaction au clic sur le bouton

Les fichiers

Le code HTML

Le code html est très simple.
Dans l'entête de la page figure les appels vers les feuilles de style, les bibliothèques jQuery, le plugin HideShowPassword et notre script index.js

Notons que la plupart des éléments du DOM sont identifiés bien que seul l'identification "id=Pwd" soit utile au script

Le script

Par $(function(){....}), on applique le jQuery sur le DOM de la page.
Puis on applique la méhode hideShowPassword() du plugin sur l'élément identifié "Pwd" (ie : le champ de saisie du mot de passe) par $('#Pwd').hideShowPassword().

Dans la documentation de cette méthode, on peut étudier ses paramètres , ils se trouvent entre les accolades. Ici j'utilise:

  • show ( initialisé à false -- pour cacher le mot de passe lors de l'ouverture de la page) ;
  • innerToggle (initialisé à 'toogle' -- pour n'afficher le bouton "montrer-cacher" que lorsque l'on clic sur le champ de saisie du mot de passe) ;
  • enlightenedtoogle (initialisé avec uniquement le paramètre className qui a pour valeur le nom de la classe du fichier CSS que je souhaite appliquer  au champ de saisie du mot de passe) ;
  • states (initialisé avec 2 paramètres : show et hidden qui permettent de caractériser le champ "mot de passe" suivant son état visible ou caché). Ces paramètres sont également paramétrables. Ils ont tous deux, les mêmes paramètres; j'ai utilisé :
    • enlightenedclassName
    • toggle avec pour paramètres
      • enlightenedclassName
      • attr avec pour seul paramètre
        • title (initialisé avec le texte qui apparaîtra dans l'info-bulle : ici "visualiser le Mdp" ou "Cacher le Mdp"). Indispensable pour une version française de la page.