section - structure html5




Existe-t-il un type d'entrée float en HTML5? (5)

Basé sur this 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 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 le 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 n'existent pas.)

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?


J'ai juste eu le même problème, et je pourrais le réparer en plaçant juste une virgule et pas un point / arrêt complet dans le nombre à cause de la 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).


Le type de number a une valeur de step contrôlant quels nombres sont valides (avec max et min ), qui vaut par défaut 1 . Cette valeur est également utilisée par les implémentations pour les boutons pas à pas (c'est-à-dire que la pression augmente 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 mettrais aussi min=0 si ça ne peut être que positif)

Si vous préférez autoriser n'importe quel nombre de décimales, vous pouvez utiliser step="any" (bien que pour les devises, je vous recommande de ne pas dépasser 0.01 ). Dans Chrome et Firefox, les boutons pas à pas augmenteront / diminueront de 1 lorsqu'ils seront utilisés. (Merci à la réponse de Michal Stefanow pour en avoir signalé quelques-unes, 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!



vous pouvez utiliser:

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

espérons aider, salutations





floating-point