Växla synlighet för lösenordsfält

Ett vanligt användningssätt är att låta formuläranvändarna växla till synlighet för den text som anges i lösenordsfältet.
Jag har använt ögonikonen från Font Awesome Library. Den CSS som krävs och eye.svg ingår i klientbiblioteket som skapats för den här demonstrationen.

Exempelkod

Det adaptiva formuläret har ett fält av typen PasswordBox anropat ssnField.

Följande kod körs när formuläret läses in

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

    });

});

Följande CSS användes för att placera ögat ikon i lösenordsfältet

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

Distribuera exempellösenordet

• Ladda ned klientbibliotek
• Ladda ned exempelformulär
• Importera klientbiblioteket med gränssnitt för pakethanterare
• Importera exempelformuläret med Forms och dokument
• Förhandsgranska formuläret