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

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?

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!

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.

Vous pouvez utiliser:

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

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

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

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

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