Zichtbaarheid wachtwoordveld in-/uitschakelen

Een veelvoorkomend geval is dat de invullers van het formulier kunnen schakelen naar de zichtbaarheid van de tekst die in het wachtwoordveld wordt ingevoerd.
Om dit gebruiksgeval te verwezenlijken, heb ik het oogpictogram van de ​ Font Awesome Bibliotheek ​ gebruikt. De vereiste CSS en eye.svg zijn opgenomen in de clientbibliotheek die voor deze demonstratie is gemaakt.

Voorbeeldcode

De adaptieve vorm heeft een gebied van type PasswordBox genoemd ssnField.

De volgende code wordt uitgevoerd wanneer het formulier wordt geladen

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

    });

});

Het volgende CSS werd gebruikt om het oog pictogram binnen het wachtwoordgebied te plaatsen

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

Voorbeeld van wachtwoorden in-/uitschakelen implementeren