Tengo un input type=time muy simple con un valor de tiempo válido según MDN :
:invalid { border-color: red; } <input type="time" value="00:00:00.750" onchange="console.log(this.validity)" /> Si solo ejecuto el fragmento (Safari) y edito el valor (Firefox 93) , independientemente de lo que edite, la entrada se considera inválida después, con un "stepMismatch": true (Safari 15, Firefox 93 y 94, Mac OS 12).
¿Que está pasando aqui? ¿Cómo funciona el step para este tipo de entrada y cómo deshacerse del estado no válido?
Según MDN , el atributo de step predeterminado de una input[type=time] es igual a 60 , medido en segundos.
Esto significa que, en ausencia de un atributo de step explícito, el tiempo solo se puede cambiar en múltiplos de un minuto.
El step funciona con el atributo min si está presente, o el atributo value de lo contrario, por lo que establecer un value="00:00:00.750" significa que solo los valores que son 750ms después de un minuto dado se consideran válidos, y dependiendo del navegador y cómo muestra la entrada, es posible que esto ni siquiera sea posible para el usuario.
Establecer step="1" le dará la opción de establecer la parte de segundos del tiempo que desee, y step="0.001" también debería permitirle establecer milisegundos. step="any" también es una opción, pero en este momento no está claramente definida. Personalmente, lo interpretaría como que básicamente deshabilita la verificación de resolución por completo, pero los navegadores pueden no estar de acuerdo.