Attiva/disattiva visibilità campi password

Ultimo aggiornamento: 2024-01-26
  • Argomenti:
  • Adaptive Forms
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Beginner
    Developer

Un caso d’uso comune consiste nel consentire ai compilatori di moduli di attivare o disattivare la visibilità del testo immesso nel campo della password.
Per eseguire questo caso d’uso, ho utilizzato l’icona dell’occhio di Libreria eccezionale di caratteri. I file CSS e eye.svg richiesti sono inclusi nella libreria client creata per questa dimostrazione.

Codice di esempio

Il modulo adattivo dispone di un campo di tipo PasswordBox denominato ssnField.

Il seguente codice 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 occhio icona nel campo della password

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

Esempio di implementazione dell’interruttore della password

In questa pagina