form - html5 validation number

Tipo de entrada HTML 5=elemento "number" para números de coma flotante en Chrome

Question

Necesito que los usuarios ingresen números flotantes, entonces uso el siguiente elemento:

<input type="number" name="my_number" placeholder="Enter number"/>

Funciona muy bien en Firefox, pero Chrome se queja de que el número no es un número entero cuando intento ingresar un decimal. Ese es un problema para mi caso. Si ingreso un atributo de step , Chrome permite el número de coma flotante:

<input type="number" name="my_number" placeholder="Enter number" step="0.1"/>

Pero entonces el problema es que 0.15 no se puede ingresar ... El step no parece adecuarse a mis necesidades. La especificación W3C menciona números de coma flotante a través de los atributos del input type="number" de input type="number" .

¿Cómo hago para que Chrome acepte números de coma flotante sin el atributo de step ?

Answer 1

Nota: Si está usando AngularJS, además de cambiar el valor del paso, es posible que deba establecer ng-model-options="{updateOn: ''blur change''}" en la entrada html.

El motivo es que los validadores se ejecuten con menos frecuencia, ya que impiden que el usuario ingrese un punto decimal. De esta forma, el usuario puede ingresar un punto decimal y los validadores entran en vigencia una vez que el usuario se vuelve borroso.

Answer 2

Prueba esto

<input onkeypress=''return event.charCode >= 48 && 
                          event.charCode <= 57 || 
                          event.charCode == 46''>

Answer 3

Pruebe <input type="number" step="0.01" /> si tiene como objetivo dos lugares decimales :-).

Answer 4

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

No tendrá problemas de validación y las flechas tendrán el paso de "1"

Validación de restricción: cuando el elemento tiene un paso de valor permitido, y el resultado de aplicar el algoritmo para convertir una cadena en un número en la cadena dada por el valor del elemento es un número, y ese número restado de la base del paso no es integral múltiplo del paso de valor permitido, el elemento sufre un desajuste de paso.

El siguiente control de rango solo acepta valores en el rango 0..1 y permite 256 pasos en ese rango:

<input name=opacity type=range min=0 max=1 step=0.00392156863>

El siguiente control permite seleccionar cualquier momento del día con precisión (por ejemplo, precisión de milésimas de segundo o más):

<input name=favtime type=time step=any>

Normalmente, los controles de tiempo están limitados a una precisión de un minuto.

http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step