Y a-t-il un type d'entrée float dans HTML5?

selon html5.org , l'attribut de valeur "Nombre" type d'entrée", s'il est spécifié et non vide, doit avoir une valeur qui est un nombre flottant valide."

pourtant c'est simplement (dans la dernière version de Chrome, en tout cas), un contrôle "updown" avec des entiers, pas des flotteurs: 

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

est-ce qu'il y a un élément d'entrée à virgule flottante natif de HTML5, ou une façon de faire le type d'entrée Nombre travailler avec des chars, des pas entiers? Ou dois-je recourir à un plugin jQuery UI?

562
demandé sur Jasper 2013-09-25 21:51:41

7 réponses

le type number a une valeur step contrôlant quels nombres sont valides (avec max et min ), qui par défaut est 1 . Cette valeur est également utilisée par les implémentations pour les boutons stepper (c'est-à-dire en appuyant sur les incréments de step ).

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

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

(j'ai aussi mis min=0 si elle ne peut être positive)

si vous préférez autoriser n'importe quel nombre de décimales, vous pouvez utiliser step="any" (bien que pour les devises, je recommande de coller à 0.01 ). Dans Chrome & Firefox, les boutons stepper incrémenteront / décrémenteront de 1 en utilisant any . (merci à la réponse de Michal Stefanow pour souligner any , et voir les spécifications pertinentes ici )

voici un terrain de jeu montrant comment diverses étapes affectent divers types d'entrées: 

<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, je vais ajouter une petite note: rappelez-vous que la validation côté client est juste une commodité pour l'utilisateur. Vous devez également valider du côté du serveur!

1147
répondu Dave 2016-08-09 16:01:57

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, qu'ils soient entiers ou décimaux? Dans ce cas, mettez step à " any " 

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

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

112
répondu Michal Stefanow 2014-07-23 21:25:53

basé sur ce 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 ">

ce qui signifie:

Char code:

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

&& est AND , || est OR de l'opérateur.

si vous essayez de flotteur avec 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 ">

Chrome et Firefox pris en charge (Linux X64) (autres navigateurs I n'existe pas.)

10
répondu dsgdfg 2017-05-23 12:18:30

vous pouvez utiliser: 

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

l'espoir pour les aider, en ce qui concerne les

9
répondu alvarodoune 2016-03-15 18:39:13

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

ensuite, je définis min dans 0.4 et max dans 0.7 avec l'étape 0.01: 0.4, 0.41, 0.42 ... 0.7

5
répondu sadalsuud 2017-06-13 14:26:54

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" permet n'importe quelle 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; ...

3
répondu Andrei Thuler 2018-02-25 19:46:54

je viens d'avoir le même problème, et je pouvais le corriger en mettant simplement un virgule et non pas un période / arrêt complet dans le numéro en raison de localisation française .

de Sorte qu'il fonctionne avec:

2 est OK

2,5 est OK

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

2
répondu Stephane 2017-02-02 15:06:22