Activer/désactiver la visibilité du champ de mot de passe

Un cas pratique courant consiste à permettre aux utilisateurs et utilisatrices de formulaire de basculer vers la visibilité du texte saisi dans le champ du mot de passe.
Pour réaliser ce cas d’utilisation, j’ai utilisé l’icône en forme d’œil de la Bibliothèque de polices Awesome. Les fichiers CSS requis et eye.svg sont inclus dans la bibliothèque cliente créée pour cette démonstration.

Exemple de code

Le formulaire adaptatif comporte un champ de type PasswordBox appelé ssnField.

Le code suivant est exécuté lors du chargement du formulaire.

$(document).ready(function() {
    $(".ssnField").append("<p id='fisheye' style='color: Dodgerblue';><i class='fa fa-eye'></i></p>");

    $(document).on('click', 'p', function() {
        var type = $(".ssnField").find("input").attr("type");

        if (type == "text") {
            $(".ssnField").find("input").attr("type", "password");
        }

        if (type == "password") {
            $(".ssnField").find("input").attr("type", "text");
        }

    });

});

Le CSS suivant a été utilisé pour positionner l’icône œil dans le champ du mot de passe.

.svg-inline--fa {
    /* display: inline-block; */
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
    position: absolute;
    top: 45px;
    right: 40px;
}

Déployez l’exemple de bouton (bascule) du mot de passe.