Blog

@sernastudio

Mostrar u ocultar una contraseña es una de esas pequeñas funcionalidades que pueden mejorar bastante la experiencia de uso de un formulario y que, además, no requieren demasiado código.

En este artículo voy a mostrar cómo añadir esta función utilizando JavaScript, sin necesidad de depender de jQuery. La idea es sencilla: cambiar dinámicamente el atributo type del campo entre password y text.

El formulario

Para empezar, voy a utilizar un formulario muy sencillo. No voy a entrar en estilos CSS ni en validaciones, ya que el objetivo de este artículo es únicamente implementar la funcionalidad de mostrar y ocultar la contraseña.

<form action="" method="post">

    <label for="user">Usuario</label>

    <input
        type="text"
        id="user"
        name="user"
        placeholder="Introduce tu usuario"
    >

    <label for="password">Contraseña</label>

    <div>

        <input
            type="password"
            id="password"
            name="contrasenya"
            placeholder="Introduce tu contraseña"
        >

        <button
            type="button"
            id="mostrar"
            aria-controls="password"
            aria-pressed="false"
        >
            Mostrar contraseña
        </button>

    </div>

    <input
        type="submit"
        value="Entrar"
        name="login"
    >

</form>

Hay un detalle importante en el botón:

<button type="button">

Al utilizar type="button", evito que el botón envíe el formulario. Su única función será cambiar la visibilidad del campo de contraseña.

Mostrar y ocultar la contraseña

Ahora puedo añadir el JavaScript encargado de controlar el comportamiento.

const password = document.getElementById('password');
const mostrar = document.getElementById('mostrar');

mostrar.addEventListener('click', function () {

    const visible = password.type === 'text';

    password.type = visible ? 'password' : 'text';

    mostrar.textContent = visible
        ? 'Mostrar contraseña'
        : 'Ocultar contraseña';

    mostrar.setAttribute(
        'aria-pressed',
        String(!visible)
    );

});

La lógica es bastante sencilla.

Primero compruebo el estado actual del campo:

const visible = password.type === 'text';

Si el campo es de tipo text, significa que la contraseña está visible. Por tanto, vuelvo a ocultarla:

password.type = 'password';

Si el campo es de tipo password, hago justamente lo contrario:

password.type = 'text';

El navegador se encarga automáticamente de mostrar u ocultar el contenido.

¿Qué ocurre realmente?

Un campo de contraseña normalmente se define mediante:

<input type="password">

Con este tipo de campo, el navegador oculta visualmente el contenido introducido.

Si cambio el atributo a:

<input type="text">

el contenido pasa a mostrarse como texto normal.

Por tanto, no necesito eliminar el atributo type ni realizar ninguna operación especial con la contraseña. Simplemente alterno entre ambos valores:

password → text → password → text...

Y con eso es suficiente para implementar la funcionalidad.

Añadiendo un icono

En el ejemplo original también añadí un icono para indicar visualmente si la contraseña estaba oculta o visible.

Para ello puedo utilizar cualquier biblioteca de iconos que ya tenga disponible en el proyecto. Por ejemplo, Font Awesome.

El botón podría quedar así:

<button
    type="button"
    id="mostrar"
    aria-controls="password"
    aria-pressed="false"
>
    <i id="icono-password" class="fa-solid fa-eye"></i>
    <span id="texto-password">Mostrar contraseña</span>
</button>

Ahora puedo modificar tanto el icono como el texto desde JavaScript:

const password = document.getElementById('password');
const mostrar = document.getElementById('mostrar');
const icono = document.getElementById('icono-password');
const texto = document.getElementById('texto-password');

mostrar.addEventListener('click', function () {

    const visible = password.type === 'text';

    password.type = visible ? 'password' : 'text';

    if (visible) {

        icono.classList.remove('fa-eye-slash');
        icono.classList.add('fa-eye');

        texto.textContent = 'Mostrar contraseña';

    } else {

        icono.classList.remove('fa-eye');
        icono.classList.add('fa-eye-slash');

        texto.textContent = 'Ocultar contraseña';

    }

    mostrar.setAttribute(
        'aria-pressed',
        String(!visible)
    );

});

De esta forma, cuando la contraseña está oculta aparece el icono del ojo junto con el texto Mostrar contraseña.

Cuando la contraseña pasa a ser visible, el icono cambia y el texto pasa a ser Ocultar contraseña.

Una mejora respecto al código original

En el código original utilizaba jQuery y eliminaba directamente el atributo type:

$('#password').removeAttr('type');

Aunque este enfoque puede funcionar, considero más claro modificar explícitamente el valor del atributo:

password.type = 'text';

Y para volver a ocultarlo:

password.type = 'password';

Además, para una funcionalidad tan pequeña no tiene demasiado sentido introducir jQuery si el proyecto no lo utiliza ya.

Con JavaScript nativo puedo resolverlo directamente y con unas pocas líneas de código.

Un pequeño detalle de accesibilidad

Ya que estoy creando un control interactivo, también puedo indicar qué elemento controla y cuál es su estado.

Para ello he utilizado:

aria-controls="password"
aria-pressed="false"

aria-controls indica qué elemento está controlando el botón, mientras que aria-pressed permite comunicar si el control está activado o no.

No es necesario para que el código funcione, pero sí es una buena práctica cuando se crean elementos interactivos.

El resultado

Con unas pocas líneas de JavaScript puedo añadir esta funcionalidad a prácticamente cualquier formulario:

• La contraseña comienza oculta.
• Al pulsar el botón pasa a ser visible.
• El texto del botón cambia.
• El icono puede cambiar entre ojo y ojo tachado.
• Al volver a pulsar, la contraseña vuelve a ocultarse.

La parte fundamental está en cambiar el tipo del campo:

password.type = 'text';

o:

password.type = 'password';

Conclusión

Mostrar u ocultar una contraseña es una funcionalidad pequeña, pero puede resultar bastante útil, especialmente cuando el usuario tiene que introducir contraseñas largas o está utilizando un dispositivo en el que resulta más difícil comprobar lo que ha escrito.

Además, es un ejemplo sencillo para entender cómo JavaScript puede modificar dinámicamente elementos HTML y reaccionar a las acciones del usuario.

No hace falta complicarlo demasiado: detectar el clic, comprobar el estado actual del campo y cambiar su atributo type.

Y si quiero añadir algo más de información visual, puedo acompañar el cambio con un texto y un icono.

Sencillo, directo y sin necesidad de cargar una biblioteca adicional para resolver algo que JavaScript ya puede hacer por sí mismo.

Visitas: 7699

Serna Studio

Website |  + postsBio ⮌

Automation & Data Specialist | Web Development | Data Processing & Integration

• Serna Studio

  [Puppeteer] Acceder a un Shadow DOM cerrado
• Serna Studio

  [Proyectos] Sernadeck. Construyendo un gestor de proyectos
• Serna Studio

  [Web] Cuando hay fútbol, Internet se rompe: el problema de los bloqueos de LaLiga
• Serna Studio

  [GO] BOE Vehículos: API para consultar precios de vehículos del BOE