web-dev-qa-db-fra.com

HTML 5 input type = "number" élément pour les nombres à virgule flottante sur Chrome

Les utilisateurs doivent entrer des nombres en virgule flottante. J'utilise donc l'élément suivant:

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

Fonctionne très bien sur Firefox, mais Chrome se plaint que le nombre n’est pas un entier lorsque je tente de saisir une décimale. C’est un problème pour mon cas. Si je saisis un attribut step , alors Chrome autorise le nombre à virgule flottante:

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

Mais le problème est que 0,15 ne peut pas être entré ... Le step ne semble pas répondre à mes besoins. Le spéc. W3C mentionne des nombres à virgule flottante dans les attributs de input type="number".

Comment obtenir Chrome pour accepter les nombres à virgule flottante sans l'attribut step?

htmlhtml5validationgoogle-chromehtml-input
45
at.

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

Il n'y aura pas de problèmes de validation et les flèches auront un pas de "1"

Validation de contrainte: lorsque l'élément a une étape de valeur autorisée et que le résultat de l'application de l'algorithme permettant de convertir une chaîne en un nombre en chaîne donnée par la valeur de l'élément est un nombre et que le nombre soustrait de la base de l'étape n'est pas une intégrale multiple de l’étape de valeur autorisée, l’élément souffre d’une inadéquation entre les étapes.

Le contrôle de plage suivant accepte uniquement les valeurs comprises dans la plage 0..1 et autorise 256 étapes dans cette plage:

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

Le contrôle suivant permet de sélectionner n’importe quel moment de la journée, avec une précision quelconque (par exemple une précision au millième de seconde ou plus):

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

Normalement, les contrôles de temps sont limités à une minute.

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

93
Gilles V.

Essayez <input type="number" step="0.01" /> _ si vous ciblez deux décimales :-).

50
codermd

Remarque: Si vous utilisez AngularJS, il vous faudra peut-être définir ng-model-options="{updateOn: 'blur change'}" sur l'entrée HTML.

La raison en est que les validateurs s'exécutent moins souvent, car ils empêchent l'utilisateur de saisir un point décimal. De cette façon, l'utilisateur peut saisir un point décimal et les validateurs entreront en vigueur après le flou de l'utilisateur.

4
ginna

Essaye ça

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