¿Hay un tipo de entrada flotante en HTML5?

819

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?

B. Clay Shannon
fuente

Respuestas:

1665

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!

Dave
fuente
1
Para responder a la edición de @ Elfayer: las comillas son opcionales en HTML a menos que desee utilizar ciertos caracteres. Personalmente prefiero omitirlos cuando sea posible para una mejor legibilidad.
Dave
55
Esto no está funcionando correctamente en las versiones más recientes de Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1003896
trpt4him
77
@Dave: Sí, técnicamente, omitir comillas está bien, pero presenta una serie de posibles problemas. Primero, un subconjunto de caracteres se maneja de manera diferente en diferentes navegadores y versiones de los mismos. Si elige no usar comillas, debe estar constantemente al tanto de qué caracteres causarán problemas en cada navegador y versión. Esa es una gran cantidad de poder mental dedicado a algo de lo que no es necesario preocuparse si solo usa comillas. (cont.)
Chris Pratt
99
En segundo lugar, si bien es posible que te preocupes por las reglas sobre qué personajes están bien y cuáles no, el desarrollador que viene detrás de ti probablemente no lo estará. Eso luego requiere que o bien soporten la ardua tarea de agregar comillas a todos los atributos que dejaste sin comillas o peor, simplemente introducen problemas en el código del que quizás ni siquiera entiendan la fuente. Finalmente, dado que a veces se tienen que usar comillas, el código luego mira incompatibles con algunos atributos citados y otros no.
Chris Pratt
2
@relipse ver aquí: stackoverflow.com/q/3790935/1180785 pero asegúrese de leer los comentarios para cada respuesta; parece que todas las opciones tienen inconvenientes, y tendrá que ver qué se ajusta a sus necesidades particulares.
Dave
153

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.

Mars Robertson
fuente
44
Chrome => Funciona perfecto Safari => No mostrará un mensaje de error, y si no es un número, no pasará al servidor IE => Versión menos de 10 no, funciona
Abhi
44
Desafortunadamente, en Chrome le permite ingresar múltiples puntos decimales, por ejemplo, una dirección IP.
Andy
18

Puedes usar:

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

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; ...

Andrei Thuler
fuente
8

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)

dsgdfg
fuente
Se siente al revés. ¿Qué tal copiar y pegar en el campo?
Mars Robertson el
44
Hack para entrada, hack para copiar y pegar, hackear encima de un hack = mala práctica. Tenemos 2017
Mars Robertson
¿Dónde lees las entradas de contraseña? ¿A quién le importa qué método usar después de una sesión? ¡No, tenemos 1856! ¡Prueba con otro usuario!
dsgdfg
Suena demasiado complicado, pero no se proporciona el razonamiento sobre este método versus otro mencionado
WebDude0482
6

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

sadalsuud
fuente
4

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).

Stephane
fuente
3
agregue lang = "en" a la entrada o cualquier padre y comenzará a usar el estilo de número en inglés
user1040495