Kennwortfeldsichtbarkeit umschalten
Ein häufiger Anwendungsfall ist die Möglichkeit, die Sichtbarkeit des in das Kennwortfeld eingegebenen Textes umzuschalten.
Um diesen Anwendungsfall zu erreichen, habe ich das Augensymbol aus der Font Awesome Library verwendet. Die erforderliche CSS und die eye.svg sind in der Client-Bibliothek enthalten, die für diese Demonstration erstellt wurde.
Beispiel-Code
Das adaptive Formular verfügt über ein Feld vom Typ PasswordBox namens ssnField.
Der folgende Code wird ausgeführt, wenn das Formular geladen wird
$(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");
}
});
});
Die folgende CSS wurde verwendet, um das Augensymbol im Kennwortfeld zu positionieren
.svg-inline--fa {
/* display: inline-block; */
font-size: inherit;
height: 1em;
overflow: visible;
vertical-align: -.125em;
position: absolute;
top: 45px;
right: 40px;
}
Beispiel für die Implementierung der Kennwortumschaltung
- Laden Sie die Client-Bibliothek herunter
- Laden Sie das Beispielformular herunter
- Importieren Sie die Client-Bibliothek mit der Package Manager-Benutzeroberfläche
- Importieren Sie das Beispielformular mithilfe der Formulare und Dokumente
- Zeigen Sie das Formular in der Vorschau an
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e