Botón para mostrar contraseña en un campo

Name: Botón para mostrar contraseña en un campo
Brand: Jose Aguilar
SKU: joseaguilarblog-7557
Availability: InStock
Rating: 5 (11 reviews)

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:

Source code

<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:

Source code

.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.

Source code

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';
    }
});