Toggle password field visibility

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

• Download the client library
• Download the sample form
• Import the client library using the package manager UI
• Import the sample form using the Forms and Document
• Preview the form

Business.Adobe.com resources