DocumentationAEMAEM TutorialsAEM Forms Tutorials

Toggle password field visibility

Last update: Tue May 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Developer

A common use case is to allow the form fillers to toggle to visibility of the text entered in the password field.
To accomplish this use case, I have used the eye icon from the Font Awesome Library. The required CSS and the eye.svg are included in the client library created for this demonstration.

Sample code

The adaptive form has a field of type PasswordBox called ssnField.

The following code gets executed when the form is loaded

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

    });

});

The following CSS was used to position the eye icon inside the password field

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

Deploy the toggle password sample

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