Botón para mostrar contraseña en un campo

En este artículo vas a descubrir como agrear un botón para mostrar u ocultar la contraseña en un campo de texto de forma sencilla utilizando JavaScript.

Se trata de una funcionalidad muy buena que no puede faltar en tu página web ya que en dispositivos pequeños, sobretodo, va a ayudar mucho al usuario cuando se está equivocando al teclear su contraseña.

Es un detalle que mejora mucho la usabilidad y puede evitar frustraciones al usuario en el momento de escribir su contraseña, se ha equivocado y no puede ver donde.

Cuando el usuario está en un dispositivo móvil y escribe mal la palabra clave en un campo de tipo contraseña y aparecen errores, le podemos permitir al usuario habilitar ver la contraseña para poderla escribir viendo las letras que teclea.

Bueno, esto se puede conseguir fácilmente con un poco de HTML, CSS y JavaScript.

Código HTML para mostrar la contraseña

Dentro del cuerpo de la página o etiqueta <body> debes tener un formulario en el que puede haber varios campos, entre ellos uno de tipo contraseña, como por ejemplo lo siguiente:

<div class="campo">
    <label for="password">Contraseña</label>
    <input type="password" name="password" id="password">
    <span>Mostrar</span>
</div>

Si te fijas bien, tan solo he creado un contenedor que contiene una etiqueta label con el texto «Contraseña», un campo de tipo contraseña y una etiqueta span que contiene el texto «Mostrar».

Diseño para el código de marcado que permite mostrar la contraseña

Para agregar un poco de diseño a esto voy a agregar lo siguiente en mi hoja de estilos CSS:

.campo {
    position: relative;
}
 
label {
    width: 100%;
}
 
input {
    width: 100%;
    padding: 7px;
}
 
.campo span {
    position: absolute;
    right: 5px;
    top: 39px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 2px 10px;
    background-color: #dadada;
}

Para conseguir como resultado algo como lo siguiente:

Mostrar y ocultar contraseña con JavaScript

Código JavaScript que permite mostrar y ocultar la contraseña

En el archivo .js de tu proyecto agrega el siguiente código que justamente permite controlar el evento para mostrar y ocultar la contraseña.

document.querySelector('.campo span').addEventListener('click', e => {
    const passwordInput = document.querySelector('#password');
    if (e.target.classList.contains('show')) {
        e.target.classList.remove('show');
        e.target.textContent = 'Ocultar';
        passwordInput.type = 'text';
    } else {
        e.target.classList.add('show');
        e.target.textContent = 'Mostrar';
        passwordInput.type = 'password';
    }
});

Este código JavaScript está esperando a que la etiqueta span, que está dentro del campo de contraseña, sea pulsado para ejecutar una función.

Dentro de este control del evento o función, he creado una variable que contiene el elemento o campo contraseña.

La lógica que sigue es la siguiente:

Si el atributo span contiene la clase «show»:

  • Elimino la clase «show».
  • Le agrego el texto «Ocultar».
  • Y cambio el tipo de input a «text».

En caso contrario, es decir, si el atributo span no contiene la clase «show»:

  • Le añado la clase «show».
  • Le agrego el texto «Mostrar».
  • Y cambio el tipo de input a «password».

Conclusión

Una vez visto, sencillo, ¿verdad?

Me da la sensación de que con el gran uso que le damos a los dispositivos móviles hoy en día, esta funcionalidad no puede faltar en tu página web.

¿Tienes una forma mejor para conseguirlo?

¿Te ha servido este tutorial? No dudes en dejar tu comentario o valoración que aprecio mucho.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(4 votos, promedio: 5 de 5)
Comparte en las redes sociales

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre