DokumentationAEMSjälvstudiekurser om AEMSjälvstudiekurser om AEM Forms

Växla synlighet för lösenordsfält

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Nybörjare
  • Utvecklare

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

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e