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


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 est simplement (dans la dernière version de Chrome, de toute façon), un contrôle "updown" avec des entiers, pas de 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 en sorte que le type d'entrée numérique fonctionne avec des flottants, et non avec ints? Ou dois-je recourir à un plugin jQuery UI?


531
2017-09-25 17:51


origine


Réponses:


le number type a un step valeur de contrôle dont les chiffres sont valides (avec max et min), qui est par défaut 1. Cette valeur est également utilisée par des implémentations pour les boutons pas à pas (c'est-à-dire en augmentant les augmentations de step).

Il suffit de changer cette valeur pour tout ce qui est approprié. Pour l'argent, deux décimales sont probablement attendues:

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

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

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

Voici un terrain de jeu montrant comment les 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, je vais ajouter une note rapide: rappelez-vous que la validation côté client est juste une commodité pour l'utilisateur. Vous devez également valider sur le serveur!


1077
2017-09-25 18:48



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 l'étape sur "any"

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

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


104
2017-07-23 21:25



vous pouvez utiliser:

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

espérons aider, salutations


10
2018-03-15 18:39



Basé sur ce répondre

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

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

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


10
2018-04-14 11:14



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
2018-06-13 14:26



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 tout décimal.
step="1" ne permettra pas de décimale.
step="0.5" permettra 0,5; 1; 1,5; ...
step="0.1" permettra 0,1; 0,2; 0,3; 0,4; ...


3
2018-02-25 19:46



Je viens d'avoir le même problème, et je pourrais le réparer en mettant juste un virgule et pas un période/arrêt complet 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).


2
2018-03-09 12:13