Existe-t-il un type de saisie flottante en HTML5 ?

Question

Selon html5.org l'attribut "value" du type d'entrée "number", 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, en tout cas) d'un contrôle "updown" avec des entiers, et non des flottants :

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

Existe-t-il un élément d'entrée à virgule flottante natif de HTML5, ou un moyen de faire en sorte que le type de saisie des nombres fonctionne avec des flottants et non des entiers ? Ou dois-je recourir à un plugin jQuery UI ?

Answer 1

Le site number a un step qui contrôle les nombres valides (ainsi que la valeur max et min ), qui a pour valeur par défaut 1 . Cette valeur est également utilisée par les implémentations pour les boutons pas à pas (c'est-à-dire qu'en appuyant sur le haut, on augmente de step ).

Il suffit de modifier cette valeur comme bon vous semble. 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 que positive)

Si vous préférez autoriser un nombre quelconque de décimales, vous pouvez utiliser la fonction step="any" (bien que pour les devises, je recommande de s'en tenir à 0.01 ). Dans Chrome et Firefox, les boutons de pas à pas s'incrémentent ou se décrémentent de 1 lorsqu'ils sont utilisés. any . (merci à la réponse de Michal Stefanow pour l'avoir fait remarquer any et voir la spécification pertinente ici )

Voici un terrain de jeu montrant comment les différentes étapes affectent les 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 petite note : n'oubliez pas que la validation côté client n'est qu'une commodité pour l'utilisateur. Vous devez également valider du côté du serveur !

Answer 2

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, définissez l'étape à "n'importe quel".

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

---

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

Answer 3

Vous pouvez utiliser :

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

Answer 4

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

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

step="any" autorisera toute décimale.
step="1" n'autorisera aucune décimale.
step="0.5" permettra 0.5 ; 1 ; 1.5 ; ...
step="0.1" permettra 0,1 ; 0,2 ; 0,3 ; 0,4 ; ...

Answer 5

Sur la base de 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 ">

Signification :

Code char :

• 48-57 égal à 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• 0 est Backspace (sinon il faut rafraîchir la page sur Firefox)
• 46 est dot

&& est AND , || est OR opé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 ">

Prise en charge de Chromium et Firefox (Linux X64) (les autres navigateurs, je n'existe pas.)