En HTML, hay un tipo de entrada muy claro para tratar con contraseñas:
<input type="password">Si usa eso, obtiene los puntos de viñeta ofuscados cuando escribe en él, como:
••••••••
Esa es la web que intenta ayudar con la seguridad. Si no lo hizo, el problema clásico es que alguien podría estar mirando por encima de su hombro, espiando lo que está entrando. Supongo que es más fácil que mirar qué teclas presionan tus dedos.
Pero UX ha evolucionado un poco y es mucho más común tener una opción como:
☑️ ¿Revelar contraseña?
Creo que la idea es que deberíamos tener una opción. La mayoría de nosotros puede echar un vistazo rápido y ver si hay miradas indiscretas y, de no ser así, podríamos elegir revelar nuestra contraseña para asegurarnos de escribir [email protected] correctamente y no están hechos para sufrir la agonía de escribirlo mal 8 veces.
¡Entonces! ¿Qué hacer?
Opción 1: utilizar type="password", luego cámbielo por type="text" con JavaScript
Esto es lo que todo el mundo está haciendo en este momento, porque es el que realmente funciona en todos los navegadores en este momento.
const input = document.querySelector(".password-input");
// When an input is checked, or whatever...
if (input.getAttribute("type") === "password") {
input.setAttribute("type", "text");
} else {
input.setAttribute("type", "password");
}El problema aquí, aparte de que es un poco extraño que tenga que cambiar los tipos de entrada solo para esto, son las herramientas de administración de contraseñas. Ojalá tuviera detalles exactos sobre esto, pero no me sorprende que jugar con los tipos de entrada pueda confundir a cualquier herramienta diseñada específicamente para buscar y rellenar previamente contraseñas, tal vez incluso las herramientas integradas en los navegadores.
Opción 2: utilizar -webkit-text-security en CSS
Esta no es una opción real porque no puede hacer que una característica importante funcione en algunos navegadores y no en otros. Pero claramente hubo un deseo de mover esta funcionalidad a CSS en algún momento, ya que funciona en algunos navegadores.
input[type="password"] {
-webkit-text-security: square;
}
form.show-passwords input[type="password"] {
-webkit-text-security: none;
}Opcion 3: input-security en CSS
Hay una especificación de borrador del editor para la seguridad de entrada. Básicamente es un valor de alternancia.
form.show-passwords input[type="password"] {
input-security: none;
}Me gusta. Simple. Pero no creo que ningún navegador lo admita todavía. Entonces, de manera un poco realista, estamos atrapados con la Opción n. ° 1 por ahora.