Växla synlighet för lösenordsfält
Ett vanligt användningssätt är att låta formuläranvändarna växla till synlighet för den text som anges i lösenordsfältet.
För att uppnå detta har jag använt ögonikonen från teckensnittsbiblioteket. Den CSS som krävs och eye.svg ingår i klientbiblioteket som skapats för den här demonstrationen.
Exempelkod
Det adaptiva formuläret har ett fält av typen PasswordBox med namnet ssnField.
Följande kod körs när formuläret läses in
$(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");
}
});
});
Följande CSS användes för att placera ikonen eye i lösenordsfältet
.svg-inline--fa {
/* display: inline-block; */
font-size: inherit;
height: 1em;
overflow: visible;
vertical-align: -.125em;
position: absolute;
top: 45px;
right: 40px;
}
Distribuera exempellösenordet
- Hämta klientbiblioteket
- Hämta exempelformuläret
- Importera klientbiblioteket med pakethanterarens gränssnitt
- Importera exempelformuläret med Forms och Document
- Förhandsgranska formuläret
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e