Existe-t-il un type d'entrée flottante en HTML5?


819

Selon html5.org , l'attribut de valeur du type d'entrée "nombre", s'il est spécifié et non vide, doit avoir une valeur qui est un nombre à virgule flottante valide. "

Pourtant, il s'agit simplement (dans la dernière version de Chrome, de toute façon), d'un contrôle "de mise à jour" avec des entiers, et non des flottants:

<input type="number" id="totalAmt"></input>

Existe-t-il un élément d'entrée en virgule flottante natif de HTML5, ou un moyen de faire fonctionner le type d'entrée numérique avec des flottants, pas des entiers? Ou dois-je recourir à un plugin jQuery UI?

Réponses:


1665

Le numbertype a une stepvaleur contrôlant quels nombres sont valides (avec maxet min), qui par défaut est 1. Cette valeur est également utilisée par les implémentations des boutons pas à pas (c'est-à-dire que la pression vers le haut augmente de step).

Modifiez simplement cette valeur en ce qui est approprié. Pour l'argent, deux décimales sont probablement attendues:

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

(Je définirais également min=0si cela ne peut être que positif)

Si vous préférez autoriser un nombre quelconque de décimales, vous pouvez l'utiliser step="any"(bien que pour les devises, je vous recommande de vous en tenir 0.01). Dans Chrome et Firefox, les boutons pas à pas augmenteront / diminueront de 1 lors de l'utilisation any. (merci à Michal Stefanow d'avoir répondu any, et voir les spécifications pertinentes ici )

Voici un terrain de jeu montrant comment différentes étapes affectent différents types d'entrée:

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


Comme d'habitude, j'ajouterai une note rapide: rappelez-vous que la validation côté client n'est qu'une commodité pour l'utilisateur. Vous devez également valider côté serveur!


1
Pour répondre à la modification de @ Elfayer: les guillemets sont facultatifs en HTML sauf si vous souhaitez utiliser certains caractères. Personnellement, je préfère les omettre si possible pour une meilleure lisibilité.
Dave

5
Cela ne fonctionne pas correctement dans les dernières versions de Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1003896
trpt4him

7
@Dave: Oui, techniquement, omettre les guillemets est bien, mais cela introduit une multitude de problèmes potentiels. Tout d'abord, un sous-ensemble de caractères est géré différemment dans différents navigateurs et versions de ceux-ci. Si vous choisissez de ne pas utiliser de guillemets, vous devez être constamment conscient des personnages qui causeront des problèmes dans chaque navigateur et version. C'est beaucoup de puissance mentale consacrée à quelque chose qui n'est pas nécessaire de s'inquiéter du tout si vous utilisez simplement des guillemets. (suite)
Chris Pratt

9
Deuxièmement, bien que vous puissiez vous soucier des règles concernant les personnages qui conviennent et ceux qui ne le sont pas, le développeur qui vous suit ne le sera probablement pas. Cela nécessite alors qu'ils supportent la tâche ardue d'ajouter des guillemets à tous les attributs que vous avez laissés sans citer ou pire, introduisent simplement des problèmes dans le code dont ils pourraient même ne pas comprendre la source. Enfin, étant donné que parfois , vous avez à utiliser des guillemets, le code semble donc incompatible avec certains attributs cités et d' autres non.
Chris Pratt

2
@relipse voir ici: stackoverflow.com/q/3790935/1180785 mais assurez-vous de lire les commentaires pour chaque réponse; il semble que toutes les options présentent des inconvénients, et vous devrez voir ce qui correspond à vos besoins particuliers.
Dave

153

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

Mais que faire si vous voulez que tous les nombres soient valides, entiers comme décimaux? Dans ce cas, définissez l'étape sur «tout»

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

Fonctionne pour moi dans Chrome, non testé dans d'autres navigateurs.


4
Chrome => Fonctionne parfaitement Safari => N'affichera pas de message d'erreur, et s'il n'est pas numéroté, il ne passera pas au serveur IE => Version inférieure à 10 non, fonctionne
Abhi

4
Malheureusement, en chrome, il vous permet d'entrer plusieurs décimales, par exemple une adresse IP.
Andy

18

Vous pouvez utiliser:

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

12

Vous pouvez utiliser l'attribut step pour le numéro de type d'entrée:

<input type="number" id="totalAmt" step="0.1"></input>

step="any"permettra toute décimale.
step="1"ne permettra aucune décimale.
step="0.5"permettra 0,5; 1; 1,5; ...
step="0.1"permettra 0,1; 0,2; 0,3; 0,4; ...


8

Basé sur cette réponse

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

Sens :

Code de caractère:

  • 48-57 égal à 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • 0 est Backspace(sinon besoin d'actualiser la page sur Firefox)
  • 46 est dot

&&est AND, ||est ORopérateur.

si vous essayez de flotter avec une virgule:

<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 et Firefox pris en charge (Linux X64) (les autres navigateurs n'existent pas.)


Se sent en arrière. Que diriez-vous de copier-coller sur le terrain?
Mars Robertson


4
Hack pour l'entrée, hack pour copier-coller, hack au-dessus d'un hack = mauvaise pratique. Nous avons 2017
Mars Robertson

Où lisez-vous les entrées de mot de passe? Qui se soucie de quelle méthode utiliser après une session? Non, nous en avons 1856! Essayez un autre utilisateur!
dsgdfg

Cela semble trop compliqué, mais le raisonnement sur cette méthode par rapport à d'autres mentionnés n'est pas fourni
WebDude0482

6

Je le fais

 <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">

puis, je définis min en 0,4 et max en 0,7 au pas 0,01: 0,4, 0,41, 0,42 ... 0,7


4

J'ai juste eu le même problème, et je pourrais le résoudre en mettant simplement une virgule et non un point / point dans le nombre en raison de la localisation en français .

Donc ça marche avec:

2 est OK

2,5 est OK

2.5 est KO (le nombre est considéré comme "illégal" et vous recevez une valeur vide).


3
ajoutez lang = "en" à l'entrée ou à n'importe quel parent et il commencera à utiliser le style numérique anglais
user1040495
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.