form - Chrome/HTML5: ¿El número del tipo de entrada no respeta el atributo máximo?
input html (2)
Es una pregunta antigua, pero no encontré ninguna respuesta relevante para esta pregunta en ninguna parte. este comportamiento sigue existiendo en chrome (versión 61).
He encontrado un pequeño truco que puede ser usado en alguna situación. es relevante para aquellos que usan bibliotecas de enlace de datos como aurelia , angular , etc. He probado solo con aurelia, pero eso también debería funcionar para otros.
El truco se basa en el hecho de que la entrada de range de tipo impone las restricciones min / max .
simplemente creamos otra entrada (de range de tipo) que está limitada al mismo valor que la entrada normal, y la ocultamos a través de css .
cuando el usuario ingresa algo que es mayor que el valor max , volverá al valor max .
Aquí hay una demostración de Aurelia: https://gist.run/?id=86fc278d3837718be4691acd5625aaad
Tengo el siguiente marcado:
<input type="number" max="99" />
En Google Chrome (y posiblemente en otros navegadores webkit), esto restringirá que la flecha hacia arriba del spinner pase de más de 99, pero no evita que el usuario escriba un número mayor que 99. Incluso en blur, el valor no válido no se elimina / reemplaza o incluso una advertencia dado que el valor no es válido.
¿Estoy malinterpretando cómo se supone que funciona, o es un error? Estoy usando la última versión de Chrome (19 en el momento de escribir esto).
Editar:
Para aclarar, quiero saber por qué se puede ingresar un número mayor que el máximo especificado en primer lugar. Me doy cuenta de que proporciona una información sobre herramientas al enviar el formulario que le dice que no es válido, pero parece un comportamiento inconsistente que indica que la ruleta no le permitirá ir por encima del máximo, sin embargo, simplemente puede escribir un número por encima del máximo en cualquier momento para evitar eso.
Si este es el comportamiento deseado por alguna razón, ¿por qué? ¿Y hay una mejor opción para imponer el rango de entrada sin tener que recurrir a JS?
Funciona pero solo ves un mensaje de error (información sobre herramientas) si pones un botón de envío y un formulario en tu código:
<form action="#" method="get">
<input type="number" max="99" />
<input type="submit" value="Submit!" />
</form>