Activation/désactivation de la visibilité du champ de mot de passe

Un cas pratique courant consiste à permettre à l’utilisateur 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’oeil du Bibliothèque Font 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é au 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 la variable oeil 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éploiement de l’exemple de mot de passe de basculement

• Téléchargez la bibliothèque cliente
• Téléchargez la exemple de formulaire
• Importez la bibliothèque cliente à l’aide de la méthode interface utilisateur du gestionnaire de modules
• Importez l’exemple de formulaire à l’aide du Forms et document
• Prévisualiser le formulaire

Ressources Business.Adobe.com