web-dev-qa-db-fra.com

Existe-t-il un type d’entrée float en HTML5?

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

Pourtant, il s’agit tout simplement (dans la dernière version de Chrome, en tout cas) d’un contrôle "actualisé" avec des entiers, pas de flottant:

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

Existe-t-il un élément d’entrée en virgule flottante natif à HTML5 ou un moyen de faire en sorte que le type d’entrée numérique fonctionne avec des éléments flottants et non ints? Ou dois-je avoir recours à un plugin jQuery UI?

html5inputfloating-point
712
B. Clay Shannon

Le type number a une valeur step contrôlant quels nombres sont valides (avec max et min), par défaut à 1. Cette valeur est également utilisée par les implémentations pour les boutons pas à pas (c’est-à-dire que l’appui vers le haut augmente de step).

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

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

(Je définirais également min=0 s'il ne peut être que positif)

Si vous préférez autoriser un nombre quelconque de décimales, vous pouvez 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 lorsqu’on utilisera any. (Merci à la réponse de Michal Stefanow pour avoir signalé any, et voir les spécifications correspondantes ici )

Voici un terrain de jeu montrant comment différentes étapes affectent différents 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, j'ajouterai une note rapide: rappelez-vous que la validation côté client n'est qu'un avantage pour l'utilisateur. Vous devez également valider côté serveur!

1461
Dave

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

Mais que se passe-t-il si vous voulez que tous les nombres soient valides, entiers et décimaux? Dans ce cas, définissez step sur “any”

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

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

135
Mars Robertson

vous pouvez utiliser:

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

espère aider, salutations

14
alvarodoune

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 n'importe quelle décimale.
step="1" n'autorisera aucune décimale.
step="0.5" autorisera 0,5; 1; 1,5; ...
step="0.1" autorisera 0,1; 0,2; 0,3; 0,4; ...

8
Andrei Thuler

Basé sur this answer

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

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

8
dsgdfg

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

alors, je définis min en 0.4 et max en 0.7 à l’étape 0.01: 0.4, 0.41, 0,42 ... 0.7

5
sadalsuud

Je viens d'avoir le même problème, et je pourrais le résoudre en mettant juste un virgule et pas un point/point final dans le nombre à cause de localisation française.

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
Stephane