Attiva/disattiva visibilità campi password
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 della Libreria di caratteri fantastici. I file CSS e eye.svg richiesti sono inclusi nella libreria client creata per questa dimostrazione.
Codice di esempio
Il modulo adattivo contiene 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 file CSS è stato utilizzato per posizionare l'icona occhio nel campo 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
- Scarica la libreria client
- Scarica il modulo di esempio
- Importa la libreria client utilizzando l'interfaccia utente di Gestione pacchetti
- Importa il modulo di esempio utilizzando Forms e il documento
- Anteprima modulo
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e