¿Hay un tipo de entrada flotante en HTML5?

Según html5.org, el atributo "value" del tipo de entrada "number", si se especifica y no está vacío, debe tener un valor que sea un número de coma flotante válido."

Sin embargo, es simplemente (en la última versión de Chrome, de todos modos), un" updown " control con números enteros, no flota: 

<input type="number" id="totalAmt"></input>

¿Hay un elemento de entrada de coma flotante nativo de HTML5, o una forma de hacer que el tipo de entrada de número funcione con flotadores, no ints? O debo recurrir a una interfaz de usuario de jQuery plugin?

Author: Jasper, 2013-09-25
Source

7 answers

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 para los botones paso a paso(es decir, presionando hacia arriba aumenta por step).

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

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

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

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

Aquí hay un patio de juegos que muestra cómo varios pasos afectan a 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 comodidad para el usuario. También debe validar en el lado del servidor!

 1147
Author: Dave,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-09 16:01:57

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, establezca el paso en"any" 

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

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

 112
Author: Michal Stefanow,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-23 21:25:53

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 ">

Significado:

Código 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 el operador OR.

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 ">

Compatible con Chromium y Firefox(Linux X64) (otros navegadores I no existe.)

 10
Author: dsgdfg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:30

Puedes usar: 

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

Espero ayudar, saludos

 9
Author: alvarodoune,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-15 18:39:13

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">

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

 5
Author: sadalsuud,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-13 14:26:54

Puede usar el atributo step 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; ...

 3
Author: Andrei Thuler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-25 19:46:54

Acabo de tener el mismo problema, y podría solucionarlo poniendo una coma y no un punto/punto en el número debido a la localización en francés.

Así que 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).

 2
Author: Stephane,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-02 15:06:22