Pregunta ¿Hay un tipo de entrada flotante en HTML5?


De acuerdo a html5.org, el atributo de "valor" del tipo de entrada "número", si está especificado y no está vacío, debe tener un valor que sea un número de punto flotante válido.

Sin embargo, es simplemente (en la última versión de Chrome, de todos modos), un control "updown" 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 enteros? ¿O debo recurrir a un plugin jQuery UI?


531
2017-09-25 17:51


origen


Respuestas:


los number tipo tiene un step valor que controla qué números son válidos (junto con max y min), que de forma predeterminada 1. Este valor también es utilizado por implementaciones para los botones de paso a paso (es decir, presionar aumenta por step)

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

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

(También me hubiera puesto min=0 si solo puede ser positivo)

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

Aquí hay un campo de juego 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 conveniencia para el usuario. ¡También debe validar por el lado del servidor!


1077
2017-09-25 18:48



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

Pero, ¿y si quieres que todos los números sean válidos, enteros y decimales por igual? En este caso, configure el paso a "cualquiera"

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

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


104
2017-07-23 21:25



puedes usar:

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

espero ayudar, saludos


10
2018-03-15 18:39



Residencia en esta responder

<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 OR operador.

si intentas flotar con la 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 no existen)


10
2018-04-14 11:14



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


5
2018-06-13 14:26



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
2018-02-25 19:46



Solo tuve el mismo problema, y ​​pude solucionarlo simplemente poniendo un coma y no un período/punto final en el número debido a Localización francesa.

Entonces funciona con:

2 está bien

2,5 está bien

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


2
2018-03-09 12:13