Alternar visibilidad del campo de contraseña

Un caso de uso común es permitir que los usuarios que rellenen el formulario puedan acceder al texto introducido en el campo de contraseña.
Para lograr este caso de uso, he utilizado el icono de ojo del Biblioteca Awesome de fuentes. El CSS requerido y el eye.svg se incluyen en la biblioteca de cliente creada para esta demostración.

Código de muestra

El formulario adaptable tiene un campo de tipo PasswordBox denominado ssnField.

El siguiente código se ejecuta cuando se carga el formulario

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

    });

});

Se ha utilizado el CSS siguiente para colocar el ojo dentro del campo de contraseña

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

Implementar el ejemplo de contraseña de alternador

• Descargue el biblioteca cliente
• Descargue el formulario de ejemplo
• Importe la biblioteca del cliente utilizando la variable interfaz de usuario del administrador de paquetes
• Importe el formulario de ejemplo utilizando la variable Forms y documento
• Obtener una vista previa del formulario

Recursos de Business.Adobe.com