Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre algo que me preguntó un usuario estos días. El usuario me preguntaba cómo podía crear un botón para mostrar u ocultar el password de un formulario. Buscando un poco entre mis apuntes de hace ya unos años, me encontré un pequeño JavaScript, el cual añadiéndolo a un archivo HTML, y dándole CSS, puede darnos el efecto deseado.
Este script con un poco de CSS nos va a permitir mostrar u ocultar el password fácilmente en nuestros formularios. La lógica detrás de esto es que, en principio el tipo de entrada es una contraseña, por lo que los caracteres se van a ver como los típicos puntos o asteriscos (nunca supe realmente que son), pero cuando hagamos clic en el botón o icono que se le va a añadir para alternar, el tipo de entrada cambia a texto, lo que hará que la contraseña se vuelva visible.
Mostrar u ocultar el password de un formulario con HTML, CSS y JavaScript
Para crear el ejemplo de esta pequeña utilidad, tan solo tendremos que crear dos archivos. El primero será un archivo HTML y el otro es un archivo CSS. Después de crear estos archivos, para probar este ejemplo en tu equipo tan solo necesitarás pegar el código que vamos a ver a continuación dentro de cada uno de ellos.
HTML y JavaScript
Como decía, vamos a crear un archivo HTML con el nombre de index.html y a pegar el siguiente código dentro. En este código, además del HTML, vamos a añadir también el pequeño JavaScript con el que podremos pasar de mostrar a ocultar el password.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mostrar u ocultar una contraseña</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--caja de contraseña-->
<div class="wrapper">
<input type="password" placeholder="Escribe tu contraseña" required>
<span class="mostrar-btn"><i class="fas fa-eye"></i></span><!--muestra el ojo-->
</div>
<!--script para mostrar u ocultar la contraseña-->
<script>
const campoPass = document.querySelector("input");
const mostrarBtn = document.querySelector("span i");
mostrarBtn.onclick = (() => {
if (campoPass.type === "password") { //mostrar password
campoPass.type = "text";
mostrarBtn.classList.add("esconder-btn");
} else { //esconder password
campoPass.type = "password";
mostrarBtn.classList.remove("esconder-btn");
}
});
</script>
</body>
</html>El CSS
Como decíamos, el segundo archivo será un CSS con el nombre de style.css, y como en el caso anterior, vamos a pegar las siguientes reglas CSS.
* {
margin: 0;
padding: 0;
font-family: 'Comic Sans', sans-serif;
box-sizing: border-box;
}
html, body {
place-items: center;
background: #1100ff;
display: grid;
height: 100%;
}
.wrapper {
position: relative;
height: 60px;
width: 400px;
border-radius: 5px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.wrapper input {
width: 100%;
height: 100%;
border: 1px solid #5b3e68;
padding-left: 15px;
font-size: 18px;
border-radius: 5px;
}
.wrapper input::placeholder {
font-size: 18px;
}
.wrapper span {
font-size: 20px;
color: #5b3e68;
cursor: pointer;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.wrapper span i.esconder-btn::before {
content: "\f070"; //el icono del ojo tachado
}
.wrapper input:valid~span {
display: block;
}
Y bueno, una vez que los códigos estén dentro de cada archivo, solo queda ejecutar el archivo .html que acabamos de crear para ver funcionando el ejemplo. Aun que si quieres verlo funcionando, sin necesidad utilizar los archivos en tu equipo local, puedes ver este ejemplo funcionando en el siguiente enlace.