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

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 en 0.4 et max en 0.7 avec un pas de 0.01 : 0.4, 0.41, 0,42 ... 0.7

Answer 2

J'ai commencé à utiliser inputmode="decimal" qui fonctionne parfaitement avec les smartphones :

<input type="text" inputmode="decimal" value="1.5">

Notez que nous devons utiliser type="text" au lieu de number . Cependant, sur le bureau, il autorise toujours les lettres comme valeurs.

Pour le bureau, vous pouvez utiliser :

<input type="number" inputmode="decimal">

qui permet 0-9 et . comme entrée et uniquement des chiffres.

Notez que certains pays utilisent , comme diviseur décimal qui est activé par défaut sur le NumPad. Ainsi, la saisie d'un nombre à virgule flottante à l'aide du Numpad ne fonctionnera pas car le champ de saisie s'attend à ce qu'une valeur de . (en chrome). C'est pourquoi vous devez utiliser type="text" si vous avez des utilisateurs internationaux sur votre site web.

Vous pouvez essayer sur le bureau (également avec Numpad) et sur votre téléphone :

<p>Input with type text:</p>
<input type="text" inputmode="decimal" value="1.5">
<br>
<p>Input with type number:</p>
<input type="number" inputmode="decimal" value="1.5">

Référence : https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Answer 3

Oui, c'est la bonne réponse :

step="any"

C'est plus efficace. Fais-moi confiance.

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

document.getElementById('form1').addEventListener('submit', function(e){
e.preventDefault();
alert("Your nnumber is: "+document.getElementById('n1').value)
alert("This works no ? :) please upvote")
})

<form id="form1">
<input type="number" step="any" id="n1">
<button type="submit">Submit</button>
</form>
<!-- UPVOTE :)-->

Answer 4

Je viens d'avoir le même problème, et j'ai pu le résoudre en mettant simplement une virgule et non un période / arrêt complet dans le nombre en raison de 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).

Answer 5

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

Cela a fonctionné pour moi et je pense que c'est le moyen le plus simple pour que le champ de saisie accepte n'importe quel nombre décimal, quelle que soit la longueur de la partie décimale. L'attribut Step indique en fait au champ de saisie le nombre de décimales à accepter. Par exemple, step="0.01" n'acceptera que deux décimales.