MOSTRAR Y OCULTAR CONTRASEÑA - JAVASCRIPT
¡Saludos cibernauta! hoy en conocesobreinformatica.com te presentamos el siguiente artículo titulado: “Mostrar y Ocultar contraseña - JavaScript".
Seguimos trabajando a diario para brindarles los mejores ejercicios/ejemplos de programación en los lenguajes más usados de la actualidad.
A continuación veamos como programar ese botón de mostrar y ocultar contraseña que es casi un requisito obligatorio de implementar en nuestros proyectos.
Empecemos...
CÓDIGO PASO A PASO - JAVASCRIPT
Empecemos a tirar líneas de código:
<!-- Para este ejemplo usaremos Bootstrap.css así que procedan a importarlo -->
<!-- También importamos Font Awesome -->
<div class="row">
<div class="col-lg-4 mx-auto mt-5">
<div class="card">
<div class="card-body bg-info">
<div class="form-group">
<label class="text-danger">Password</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-group text-center">
<button type="button" id="mostrar" class="btn btn-dark">
<i class="fas fa-eye"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
// primero seleccionamos el elemento id del button
mostrar.addEventListener("mousedown", ( ) =>{
// Eliminamos su type del input
password.removeAttribute("type");
});
mostrar.addEventListener("mouseup", ( ) => {
// Agregamos type de input
password.setAttribute("type", "password");
});
Hemos llegamos al final de este artículo, como equipo de CSI esperamos realmente toda la información recopilada y analizada te resulte de utilidad en tus estudios o vida laboral.
Te recordamos que hoy por hoy conocesobreinformatica cuenta con las siguientes redes para mantener al tanto de toda la información nueva:
- Suscripciones de correo electrónico, se el primero en enterarte de lo que publicamos:
CONTENIDO RELACIONADO
REGRESAR A LA CATEGORÍA:
Programación
variedad de lenguajes