const eyeIcons = {
open: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="eye-icon"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z" /><path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" /></svg>',
closed: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="eye-icon"><path d="M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" /><path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" /><path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" /></svg>'
};
function addListeners() {
const toggleButton = document.querySelector(".toggle-button");
if (!toggleButton) {
return;
}
toggleButton.addEventListener("click", togglePassword);
}
function togglePassword() {
const passwordField = document.querySelector("#password-field");
const toggleButton = document.querySelector(".toggle-button");
if (!passwordField || !toggleButton) {
return;
}
toggleButton.classList.toggle("open");
const isEyeOpen = toggleButton.classList.contains("open");
toggleButton.innerHTML = isEyeOpen ? eyeIcons.closed : eyeIcons.open;
passwordField.type = isEyeOpen ? "text" : "password";
}
document.addEventListener("DOMContentLoaded", addListeners);
Demo
En el siguiente demo, incluyo un formulario para iniciar sesión donde la contraseña puede verse y esconderse al dar click en el botón con el ícono de ojo.
See the Pen Show password when click on an eye button by Roel Magdaleno (@roelmagdaleno) on CodePen.
Contexto
Digamos que estás desarrollando tu aplicación web, la cual contiene el clásico formulario para iniciar sesión. Este formulario contiene dos <input />
, uno para usuario y otro para contraseña.
Hasta ahí todo bien, pero los usuarios se empiezan a frustrar porque los caracteres escritos dentro del <input type="password" />
(campo de contraseña) están escondidos.
¿Por qué el usuario se puede frustrar por la acción anterior?
No puedes negarlo, como usuarios, nos gusta confirmar lo que estamos escribiendo por dos motivos (en lo personal, así lo veo):
- Quiero acceder rápidamente, hay un ligero sentimiento de frustración al ver el mensaje de que tu contraseña es incorrecta.
- Quiero evitar algún tipo de bloqueo por parte de la plataforma, esto pasa mayormente en páginas de banco e inversiones.
Explicación
En esta sección solo explicaré cómo funciona el JavaScript. Visita el snippet donde te enseño a cómo poner el ícono dentro de un input con HTML y CSS.
Para empezar, dentro del callback del evento DOMContentLoaded
debemos encontrar el botón que mostrará o esconderá la contraseña y a ese mismo botón le asignaremos un evento click
.
function addListeners() {
const toggleButton = document.querySelector(".toggle-button");
if (!toggleButton) {
return;
}
toggleButton.addEventListener("click", togglePassword);
}
document.addEventListener("DOMContentLoaded", addListeners);
En el código anterior y en los siguientes, agrego una condición preguntando si algunos elementos no existen, si es así, entonces no continua con la ejecución del programa.
Esto es para evitar errores en consola. Aunque si estás seguro que los elementos siempre existirán, entonces las condiciones que agregué son innecesarias.
La función togglePassword
se ejecutará cuando se haga click en el botón. Aquí es donde sucede la magia.
function togglePassword() {
const passwordField = document.querySelector("#password-field");
const toggleButton = document.querySelector(".toggle-button");
if (!passwordField || !toggleButton) {
return;
}
toggleButton.classList.toggle("open");
const isEyeOpen = toggleButton.classList.contains("open");
toggleButton.innerHTML = isEyeOpen ? eyeIcons.closed : eyeIcons.open;
passwordField.type = isEyeOpen ? "text" : "password";
}
La parte más importante es agregar/quitar a toggleButton
(o el botón que sirve para mostrar u ocultar la contraseña) la clase CSS: open
.
Con la clase CSS open
decidiremos si debemos mostrar o no la contraseña. El resultado tenemos que asignarlo a la constante isEyeOpen
.
function togglePassword() {
const passwordField = document.querySelector("#password-field");
const toggleButton = document.querySelector(".toggle-button");
if (!passwordField || !toggleButton) {
return;
}
toggleButton.classList.toggle("open"); // [tl! focus]
const isEyeOpen = toggleButton.classList.contains("open"); // [tl! focus]
toggleButton.innerHTML = isEyeOpen ? eyeIcons.closed : eyeIcons.open;
passwordField.type = isEyeOpen ? "text" : "password";
}
Lo anterior lo realizamos con la función Element.classList.toggle(), la cual internamente pregunta si el elemento ya tiene la clase CSS o no, si ya tiene la clase, entonces lo quita, si no, sucede lo contrario, lo agrega.
Y para ver si la clase CSS open
existe en el botón, usamos Element.classList.contains().
Para mostrar la contraseña hay que acceder al “tipo” del campo de la contraseña (la constante passwordField
) – por default es password
.
Al hacer click en el botón, hay que convertir el campo de contraseña a tipo text
, solo si isEyeOpen
es verdadero. ¡Ese es el truco!
function togglePassword() {
const passwordField = document.querySelector("#password-field");
const toggleButton = document.querySelector(".toggle-button");
if (!passwordField || !toggleButton) {
return;
}
toggleButton.classList.toggle("open");
const isEyeOpen = toggleButton.classList.contains("open");
toggleButton.innerHTML = isEyeOpen ? eyeIcons.closed : eyeIcons.open; // [tl! focus]
passwordField.type = isEyeOpen ? "text" : "password"; // [tl! focus]
}
Y listo. En unas cuantas líneas de código hemos podido mostrar y ocultar la contraseña de nuestro campo.
Deja un comentario