Interactive Card Details
El reto principal
Formatear un número de tarjeta en grupos de cuatro suena a un replace de una línea. No lo es: hay que reinsertar el cursor donde el usuario lo tenía, aguantar que pegue el número completo desde el portapapeles, y que borrar hacia atrás no se quede atascado en los espacios que tú mismo insertaste.
Al reformatear el valor en cada pulsación, el cursor saltaba al final del campo: editar un dígito del medio era imposible. Cleave.js resuelve exactamente ese problema —mantiene la posición del cursor al reescribir el valor— y me ahorró reimplementar a mano el cálculo del desplazamiento por cada separador insertado.
Qué aprendí
Los campos de texto con formato son un problema clásico mucho más profundo de lo que aparenta. Saber reconocerlo evita reescribir a mano algo que una librería de 5 KB ya resolvió bien.
- Reescribir el valor de un
inputmueve el cursor: hay que restaurarlo a mano - La validación se muestra al salir del campo, no en cada tecla: avisar demasiado pronto molesta
- La vista previa en vivo hace que los errores del formulario se entiendan sin leer el mensaje
- JavaScript
- Cleave.js
- CSS
- GitHub Pages