¿Hay 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 válido de coma flotante".

Sin embargo, es simplemente (en la última versión de Chrome, de todos modos), un control "arriba-abajo" con 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 de número funcione con flotantes, no con ints? ¿O debo recurrir a un complemento de jQuery UI?

El numbertipo tiene un stepvalor que controla qué números son válidos (junto con maxy min), que por defecto es 1. Este valor también lo usan las implementaciones para los botones paso a paso (es decir, presionar hacia arriba aumenta en step).

Simplemente cambie este valor a lo que sea apropiado. Por dinero, probablemente se esperan dos decimales:

<input type="number" step="0.01">

(También establecería min=0si solo puede ser positivo)

Si prefiere permitir cualquier número de decimales, puede usar step="any"(aunque para las monedas, le recomiendo que se quede 0.01). En Chrome y Firefox, los botones paso a paso aumentarán / disminuirán en 1 cuando se usen any. (gracias a la respuesta de Michal Stefanow por señalar anyy ver la especificación relevante aquí )

Aquí hay un patio de recreo que muestra cómo varios pasos afectan a los distintos 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 debe validar en el lado del servidor!

Vía: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

Pero, ¿qué sucede si desea que todos los números sean válidos, enteros y decimales por igual? En este caso, establezca el paso en "cualquiera"

<input type="number" step="any" />

Funciona para mí en Chrome, no probado en otros navegadores.

Puedes usar:

<input type="number" step="any" min="0" max="100" value="22.33">

Puede usar 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á decimales.
step="0.5"permitirá 0.5; 1; 1,5; ...
step="0.1"permitirá 0.1; 0.2; 0.3; 0.4; ...

Basado en esta respuesta

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

Sentido :

Código de char:

• 48-57 igual a 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• 0 es Backspace(de lo contrario, necesita actualizar la página en Firefox)
• 46 es dot

&&es AND, ||es ORoperador.

si intentas flotar con coma:

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

Chromium y Firefox compatibles (Linux X64) (otros navegadores no existen)

Lo hago

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

luego, defino min en 0.4 y max en 0.7 con el paso 0.01: 0.4, 0.41, 0,42 ... 0.7

Simplemente tuve el mismo problema, y ​​pude solucionarlo simplemente poniendo una coma y no un punto / punto en el número debido a la localización en francés .

Entonces funciona con:

2 está bien

2,5 está bien

2.5 es KO (el número se considera "ilegal" y recibe un valor vacío).