Toggle password field visibility

Last update: 2023-12-04
  • 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

On this page