HTML 5 input type = "number" élément pour les nombres à virgule flottante sur Chrome
J'ai besoin que les utilisateurs entrent des nombres à virgule flottante, donc j'utilise 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 j'essaie d'entrer une décimale. C'est un problème pour mon cas. Si j'entre un attribut step, alors Chrome autorise le nombre à virgule flottante:
<input type="number" name="my_number" placeholder="Enter number" step="0.1"/>
Mais alors le problème est 0.15 ne peut pas être entré... Le step ne semble pas répondre à mes besoins. La spécification W3C mentionne des nombres à virgule flottante tout au long des attributs de input type="number".
Comment faire en sorte que Chrome accepte les nombres à virgule flottante sans l'attribut step?
4 réponses
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 le résultat de l'application de l'algorithme pour convertir une chaîne en nombre à la chaîne donnée par la valeur de l'élément est un nombre, et que nombre soustrait de la base de pas n'est pas un multiple intégral de l'étape de valeur autorisée, l'élément souffre d'un décalage d'étape.
Ce qui suit le contrôle de plage n'accepte que les valeurs comprises dans la plage 0..1, et permet 256 étapes dans cette plage:
<input name=opacity type=range min=0 max=1 step=0.00392156863>Le le contrôle suivant permet de sélectionner n'importe quel moment de la journée, avec n'importe quel précision (par exemple, précision du millième de seconde ou plus):
<input name=favtime type=time step=any>Normalement, les contrôles de temps sont limité à une précision de minute.
Http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step
Essayez <input type="number" step="0.01" /> si vous ciblez 2 décimales: -).
Remarque: Si vous utilisez AngularJS, en plus de changer la valeur de l'étape, vous devrez 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 d'entrer un point décimal. De cette façon, l'utilisateur peut taper un point décimal et les validateurs entrent en vigueur après le flou de l'utilisateur.
Essayez ceci
<input onkeypress='return event.charCode >= 48 &&
event.charCode <= 57 ||
event.charCode == 46'>