Portada


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

Programación

variedad de lenguajes

Deja un comentario