Según html5.org, el "número" tipo de entrada's "atributo de valor, si se especifica y no está vacío, debe tener un valor que es un número de punto flotante válido."
Sin embargo, es simplemente (en la última versión de Chrome, de todos modos), un "updown" control con enteros, no flotadores:
<input type="number" id="totalAmt"></input>
¿Existe un elemento de entrada de punto flotante nativo de HTML5, o una forma de hacer que el tipo de entrada numérica funcione con flotadores, no con ints? ¿O debo recurrir a un plugin de jQuery UI?
El tipo number
tiene un valor step
que controla qué números son válidos (junto con max
y min
), que por defecto es 1
. Este valor también es utilizado por las implementaciones de los botones de paso (es decir, pulsar hacia arriba aumenta en paso
).
Simplemente cambie este valor a lo que sea apropiado. Para el dinero, probablemente se esperan dos decimales:
<input type="number" step="0.01">
(Yo también pondría min=0
si sólo puede ser positivo)
Si prefiere permitir cualquier número de decimales, puede utilizar step="cualquier" (aunque para las monedas, yo'recomendaría ceñirse a
0,01). En Chrome & Firefox, los botones de paso aumentarán / disminuirán en 1 cuando se utilice
cualquiera`. (gracias a la respuesta de Michal Stefanow'por señalar "cualquier", y ver la especificación relevante aquí)
Aquí's un campo de juego que muestra cómo varios pasos afectan a varios tipos de entrada:
begin snippet: js hide: false console: true babel: false -->
<form>
<input type=number step=1 /> Step 1 (default)<br />
<input type=number step=0.01 /> Step 0.01<br />
<input type=number step=any /> Step any<br />
<input type=range step=20 /> Step 20<br />
<input type=datetime-local step=60 /> Step 60 (default)<br />
<input type=datetime-local step=1 /> Step 1<br />
<input type=datetime-local step=any /> Step any<br />
<input type=datetime-local step=0.001 /> Step 0.001<br />
<input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
<input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
<input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>
Como siempre, añadiré una nota rápida: recuerda que la validación del lado del cliente es sólo una comodidad para el usuario. ¡También debes validar en el lado del servidor!
Vía: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
Pero, ¿qué pasa si quieres que todos los números sean válidos, enteros y decimales por igual? En este caso, establece el paso a "cualquiera"
<input type="number" step="any" />
A mí me funciona en Chrome, no lo he probado en otros navegadores.
Acabo de tener el mismo problema, y he podido solucionarlo simplemente poniendo una comma y no un punto/punto final en el número debido a la localización francesa**.
Así que funciona con:
<input type="number" value="" />2 está bien
2,5 está bien
2,5 es KO (El número se considera "ilegal" y se recibe un valor vacío).