Sichtbarkeit des Kennwortfelds ein/aus

Ein gängiger Anwendungsfall besteht darin, den Ausfüllern des Formulars die Anzeige des im Kennwortfeld eingegebenen Texts zu ermöglichen.
Um diesen Anwendungsfall zu erreichen, habe ich das Augensymbol von Font Awesome Library. Die erforderliche CSS und die eye.svg sind in der Client-Bibliothek enthalten, die für diese Demonstration erstellt wurde.

Beispielcode

Das adaptive Formular verfügt über ein Feld vom Typ PasswordBox namens ssnField.

Der folgende Code wird ausgeführt, wenn das Formular geladen wird

$(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");
        }

    });

});

Die folgende CSS wurde verwendet, um die Auge Symbol im Kennwortfeld

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

Beispiel für Umschalter-Kennwort bereitstellen

• Laden Sie die Client-Bibliothek
• Laden Sie die Beispielformular
• Importieren Sie die Client-Bibliothek mit der Package Manager-Benutzeroberfläche
• Importieren Sie das Beispielformular mit dem Forms und Dokument
• Nutzen Sie die Funktion zur Formularvorschau.

Ressourcen für Business.Adobe.com