2012-05-25 23 views
23

tengo el siguiente marcado:Chrome/HTML5: ¿Número de tipo de entrada que no respeta el atributo max?

<input type="number" max="99" /> 

En Google Chrome (y posiblemente otros navegadores webkit), esto restringirá el control de giro de la flecha hacia arriba para que no pasen 99, pero no evitar que el usuario escriba una número superior a 99. Incluso onblur, 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 al momento de escribir).

Editar:

Para aclarar, yo quiero saber por qué se permite que un número mayor que el máximo especificado para ser introducida en el primer lugar. Me doy cuenta de que da una información sobre herramientas en el envío del formulario que le dice que no es válido, pero parece ser un comportamiento incoherente que el girador 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 eludir eso.

Si este es el comportamiento deseado por alguna razón, ¿por qué? ¿Y existe una mejor opción para aplicar el rango de entrada sin recurrir a JS?

+0

funciona bien para mí, me sale el mensaje de error "El valor debe ser menor o igual a 99.". ¿Podemos ver tu código real, por favor? –

+0

Chrome y Opera arrojan una advertencia cuando intento enviar un formulario que tiene un número fuera del rango: http://jsfiddle.net/j08691/Uv3EA/ – j08691

+0

¿Por qué esto solo se muestra en el envío del formulario? Y más importante aún, ¿por qué está permitido en primer lugar? Restringe la ruleta, por lo que no puede usarla para ingresar un valor más alto. ¿Por qué no también la entrada manual? Y no puedo usar maxlength, o pattern para restringirlo, ya que estos no son aplicables a las entradas de tipo de número. Estoy atrapado escribiendo un JS kludge ... – FtDRbwLXw6

Respuesta

8

Sí funciona, pero sólo ver un mensaje de error (información sobre herramientas) si se pone un botón de envío y una forma en su código:

<form action="#" method="get"> 
    <input type="number" max="99" /> 
    <input type="submit" value="Submit!" /> 
</form> 

jsFiddle

+4

Gracias, pero eso solo muestra un mensaje de error. Estoy más preocupado por el hecho de que permite que se ingrese un valor que es mayor que el máximo en primer lugar. El control giratorio no te deja ir por encima del máximo, entonces ¿por qué te permite escribir un número mayor? Parece un descuido o error para mí. – FtDRbwLXw6

+1

Aparentemente los poderes no coinciden con mi clasificación como un error. – FtDRbwLXw6

+8

Esto es totalmente un error, por favor repita su supervisión a ellos: c – Vix

1

Es una vieja pregunta, pero No encontré ninguna respuesta relevante para esta pregunta en ningún lado. este comportamiento aún existe en chrome (versión 61).

He encontrado un pequeño truco que se puede utilizar en algunas situaciones. es relevante para quienes usan bibliotecas de enlace de datos como aurelia, angular etc. Probé solo en aurelia, pero eso debería funcionar también para otros.

el truco se basa en el hecho de que la entrada de tipo range impone las restricciones min/max.

simplemente creamos otra entrada (del tipo range) 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í es una demostración de Aurelia: https://gist.run/?id=86fc278d3837718be4691acd5625aaad

Cuestiones relacionadas