¿Existe un tipo de entrada flotante en HTML5?
Según html5.org , el "atributo de valor" del tipo de entrada "número", si se especifica y no está vacío, debe tener un valor que sea un número de punto flotante válido.
Sin embargo, es simplemente (al menos en la última versión de Chrome) un control "arriba-abajo" con números enteros, no flotantes:
<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érico funcione con flotantes, no con enteros? ¿O debo recurrir a un complemento jQuery UI?
El numbertipo tiene un stepvalor que controla qué números son válidos (junto con maxy min), cuyo valor predeterminado es 1. Este valor también lo utilizan las implementaciones de los botones paso a paso (es decir, presionar hacia arriba aumenta en step).
Simplemente cambie este valor al que sea apropiado. Para el dinero, probablemente se esperan dos decimales:
<label for="totalAmt">Total Amount</label>
<input type="number" step="0.01" id="totalAmt">
(También establecería min=0si solo puede ser positivo)
Si prefiere permitir cualquier número de decimales, puede utilizar step="any"(aunque para las monedas, recomiendo utilizar 0.01). En Chrome y Firefox, los botones paso a paso aumentarán/disminuirán en 1 cuando se utilicen any. (gracias a la respuesta de Michal Stefanow por señalarlo anyy consulte las especificaciones relevantes aquí )
Aquí hay un área de juegos que muestra cómo varios pasos afectan varios tipos de entrada:
<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 de costumbre, agregaré una nota rápida: recuerde que la validación del lado del cliente es solo una conveniencia 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, tanto enteros como decimales? En este caso, establezca el paso en "cualquiera".
<input type="number" step="any" />
A mí me funciona en Chrome, no probado en otros navegadores.
Puedes usar:
<input type="number" step="any" min="0" max="100" value="22.33">
Puede utilizar el atributo de paso para el número de tipo de entrada:
<input type="number" id="totalAmt" step="0.1"></input>
step="any"permitirá cualquier decimal.
step="1"no permitirá ningún decimal.
step="0.5"permitirá 0,5; 1; 1,5; ...
step="0.1"permitirá 0,1; 0,2; 0,3; 0,4; ...
