Alternar visibilidad del campo de contraseña
Un caso de uso común es permitir que los rellenadores de formulario cambien a la visibilidad del texto introducido en el campo de contraseña.
Para aplicar este ejemplo de uso, he usado el icono de ojo de la Biblioteca de fuentes impresionantes. El CSS requerido y 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");
}
});
});
El siguiente CSS se utilizó para colocar el icono eye 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 alternancia
- Descargar la biblioteca de cliente
- Descargar formulario de ejemplo
- Importe la biblioteca de cliente mediante la IU del administrador de paquetes
- Importar el formulario de ejemplo con Forms y el documento
- Vista previa del formulario
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e