Documentatie AEM Tutorials voor AEM Tutorials voor AEM Forms

Zichtbaarheid wachtwoordveld in-/uitschakelen

Laatst bijgewerkt: 24 maart 2025

Van toepassing op:
Experience Manager 6.5

Onderwerpen:
Adaptieve formulieren

Gemaakt voor:

Beginner
Ontwikkelaar

Een veelvoorkomend geval is dat de invullers van het formulier kunnen schakelen naar de zichtbaarheid van de tekst die in het wachtwoordveld wordt ingevoerd.
Om dit gebruiksgeval te verwezenlijken, heb ik het oogpictogram van de Font Awesome Bibliotheekgebruikt. De vereiste CSS en eye.svg zijn opgenomen in de clientbibliotheek die voor deze demonstratie is gemaakt.

Voorbeeldcode

De adaptieve vorm heeft een gebied van type PasswordBox genoemd ssnField.

De volgende code wordt uitgevoerd wanneer het formulier wordt geladen

$(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");
        }

    });

});

Het volgende CSS werd gebruikt om het oog pictogram binnen het wachtwoordgebied te plaatsen

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

Voorbeeld van wachtwoorden in-/uitschakelen implementeren

Download de cliëntbibliotheek
Download de steekproefvorm
Importeer de cliëntbibliotheek gebruikend pakketmanager UI
Importeer de steekproefvorm gebruikend Forms en Document
Voorproef de vorm

recommendation-more-help