Añade un botón para mostrar y ocultar contraseñas con JavaScript. Conserva la etiqueta, el autocompletado y un estado accesible.
Mostrar y ocultar una contraseña sin perder el formulario
Mostrar y ocultar contraseña es una ayuda de entrada: permite revisar lo escrito antes de enviarlo. El ejemplo modifica el tipo del mismo campo, en lugar de copiar su valor a otro control. Mantener el elemento conserva su relación con la etiqueta y evita dos campos que se desincronicen. La contraseña continúa perteneciendo al formulario original y el botón solo cambia su representación.
Lo que esta función resuelve
En móvil es fácil escribir una letra incorrecta y no reconocerla detrás de los puntos. Ofrecer una revisión voluntaria reduce ese problema, pero no mejora por sí misma la fortaleza de la clave ni autentica al usuario. El servidor sigue teniendo que gestionar la sesión y la verificación. Presenta el control como una ayuda visual y no como una característica de protección adicional.
Código completo para probar en tu navegador
Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. El ejemplo no requiere bibliotecas.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mostrar y ocultar contraseña con JavaScript</title>
<style>
*{box-sizing:border-box}body{font:16px/1.6 system-ui,sans-serif;max-width:900px;margin:2rem auto;padding:1rem;color:#17233b}label{display:block;font-weight:700;margin-top:1rem}input,textarea,select,button{font:inherit;padding:.65rem;max-width:100%}textarea{width:100%}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #173b94;outline-offset:3px}[hidden]{display:none!important}[role=tab][aria-selected=true]{background:#173b94;color:white}[role=tab]{border:1px solid #bdcbe2;border-radius:.5rem}[role=tabpanel]{padding:1rem;border:1px solid #bdcbe2}
</style>
</head>
<body>
<label for="clave">Contraseña</label>
<input id="clave" type="password" autocomplete="current-password">
<button id="ver" type="button" aria-controls="clave" aria-pressed="false">Mostrar contraseña</button>
<script>
const clave = document.querySelector('#clave');
const ver = document.querySelector('#ver');
ver.addEventListener('click', () => {
const visible = clave.type === 'password';
clave.type = visible ? 'text' : 'password';
ver.setAttribute('aria-pressed', String(visible));
ver.textContent = visible ? 'Ocultar contraseña' : 'Mostrar contraseña';
});
</script>
</body>
</html>La importancia del tipo de botón
Dentro de un formulario, un botón sin tipo puede actuar como envío. Este control declara type button para que mostrar el valor no intente iniciar sesión. Comprueba ese detalle cuando reutilices el fragmento en una pantalla existente. Si al tocar el icono aparece un mensaje de validación o se envía la página, el problema puede ser el tipo del botón y no la lógica que alterna el campo.
Estado visible y estado accesible
El atributo aria-pressed indica si está activada la visualización. El texto cambia entre mostrar y ocultar para explicar la próxima acción. No utilices un ojo sin nombre accesible ni dependas exclusivamente de su color. Si eliges mantener una etiqueta fija con un estado alternado, comprueba que el conjunto siga siendo comprensible. El ejemplo favorece una explicación directa para quien no reconoce el icono.
Autocompletado según el flujo
Current-password corresponde al uso de una contraseña existente. En una pantalla de creación puede necesitarse new-password. No desactives el autocompletado por copiar un patrón de otra aplicación. Los gestores de contraseñas ayudan a utilizar valores únicos y largos. Comprueba que el cambio de tipo no interfiere con el gestor y prueba la pantalla en los dispositivos que necesitas admitir.
Qué no debes registrar
No escribas el valor del campo en consola ni lo añadas a mensajes de diagnóstico. Tampoco lo guardes en localStorage para recordar si estaba visible. El estado visual se puede recordar sin persistir el secreto, aunque en muchas pantallas conviene comenzar oculto. El snippet no necesita enviar ningún dato para alternar la visualización. Mantén esa responsabilidad separada del proceso de autenticación.
Una o varias contraseñas
En un registro puede haber contraseña y confirmación. Decide si cada una tiene su propio control o si un botón gobierna ambas con una explicación clara. Cada campo debe conservar su etiqueta e identificador único. No hagas que un botón llamado mostrar contraseña cambie silenciosamente un segundo dato que no se percibe en pantalla. La relación entre acción y resultado debe poder anticiparse.
Foco y edición de una clave larga
Comprueba que el usuario puede seguir corrigiendo el contenido después de alternar. Evita desplazar el foco de forma innecesaria al pulsar el botón con teclado. Si tu implementación devuelve el foco al campo, verifica que no desorienta a quien quería continuar con el siguiente control. Prueba una clave larga y revisa que los estilos no cambien bruscamente el ancho al pasar de puntos a texto.
Diseño sin superposiciones
Es tentador colocar un icono dentro del campo con posición absoluta. Si lo haces, reserva espacio suficiente y prueba el texto largo, el zoom y el autocompletado. Una alternativa sencilla es un botón visible junto al campo o debajo. No ocultes el control en una zona demasiado pequeña para el tacto. El aspecto debe ayudar a reconocer una acción secundaria sin competir con el envío principal.
Errores de inicialización
El script debe ejecutarse cuando el campo y el botón existen. En una página con carga dinámica, inicializa el componente cuando se incorpora y evita registrar el mismo evento varias veces. Si un clic muestra y oculta inmediatamente, puede haber manejadores duplicados. Usa referencias locales o un contenedor por instancia para no confundir el formulario de cabecera con otro incluido al final de la página.
Pruebas antes de integrarlo
Escribe caracteres, alterna varias veces y confirma que no desaparece el valor. Envía el formulario por sus controles propios y comprueba que mostrar no provoca un envío. Repite con el campo vacío y con un gestor de contraseñas. Comprueba el anuncio del estado con las herramientas disponibles. Esta prueba valida representación y recorrido; no demuestra que el sistema de acceso del servidor sea seguro.
Cuándo mantener la contraseña oculta
No actives la visualización automáticamente al recibir un error de acceso ni después de pegar. Debe ser una decisión de quien está utilizando el dispositivo, porque puede haber otras personas cerca. Mantén disponible el cierre de la visualización y evita reconstruir el campo cuando aparece un mensaje. Una ayuda pequeña funciona mejor cuando conserva expectativas: el dato permanece, la persona controla cuándo verlo y el formulario mantiene su comportamiento.
Una prueba específica para pantallas estrechas
Reduce el formulario hasta el ancho mínimo previsto y aumenta el tamaño del texto. Comprueba que la etiqueta del botón cabe, que no tapa parte del campo y que puedes reconocer el estado actual. Si la interfaz utiliza una fila, permite que el control pase debajo cuando no quede espacio. Mantener una disposición rígida para conservar una captura suele perjudicar precisamente a quienes necesitan ampliar el contenido. Prueba además el teclado virtual con una clave más larga que el ancho visible.
Revisión del envío después de alternar
Rellena el campo, muéstralo, ocúltalo y comprueba los datos que procesaría el formulario en un entorno controlado. No publiques ni registres la contraseña durante esa comprobación. El objetivo es confirmar que alternar el tipo no cambia el nombre del campo ni lo sustituye por un control diferente. Si añades validación visual, revisa que el mensaje no reconstruya toda la fila y pierda la relación entre etiqueta, campo y botón. Conserva ese mismo recorrido después de cada cambio del diseño.
Guías relacionadas para seguir practicando
Puedes ampliar esta práctica con Crear formularios en HTML y Validar un formulario.
