Attiva/disattiva visibilità campo password

Un caso d’uso comune consiste nell’consentire ai compilatori di passare alla visibilità del testo immesso nel campo password.
Per eseguire questo caso d’uso, ho utilizzato l’icona occhio dal Libreria a forma di carattere. I CSS richiesti e eye.svg sono inclusi nella libreria client creata per questa dimostrazione.

Codice di esempio

Nel modulo adattivo è presente un campo di tipo PasswordBox denominato ssnField.

Il codice seguente viene eseguito al caricamento del modulo

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

    });

});

Il seguente CSS è stato utilizzato per posizionare il occhio icona all’interno del campo password

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

Distribuire l’esempio di password di attivazione/disattivazione

In questa pagina