web-dev-qa-db-fra.com

Autoriser 2 décimales dans <input type = "number">

J'ai un <input type="number"> et je veux limiter la saisie des utilisateurs à des nombres purs ou à des nombres avec des décimales allant jusqu'à 2 décimales.

Fondamentalement, je demande une entrée de prix.

Je voulais éviter de faire des regex. Y a-t-il un moyen de le faire?

<input type="number" required name="price" min="0" value="0" step="any">
htmlhtml5numbers
148
nubteens

Au lieu de step="any", qui autorise un nombre quelconque de décimales, utilisez step=".01", qui autorise deux décimales au maximum.

Plus de détails dans la spécification: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

231
Michael_B

Si c'est le cas, n'importe qui recherche une expression rationnelle n'autorisant que les nombres avec 2 décimales facultatives.

^\d*(\.\d{0,2})?$

Par exemple, j'ai trouvé la solution ci-dessous assez fiable

HTML:

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

JS/JQuery:

$(document).on('keydown', 'input[pattern]', function(e){
  var input = $(this);
  var oldVal = input.val();
  var regex = new RegExp(input.attr('pattern'), 'g');

  setTimeout(function(){
    var newVal = input.val();
    if(!regex.test(newVal)){
      input.val(oldVal); 
    }
  }, 0);
});
25
Weston Ganger

Pour devise, je suggérerais:

<div><label>Amount $
    <input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>

Voir http://jsfiddle.net/vx3axsk5/1/

Les propriétés HTML5 "step", "min" et "pattern" seront validées lors de l'envoi du formulaire, pas sur le flou. Vous n'avez pas besoin de step si vous avez un pattern et vous n'avez pas besoin d'un pattern si vous avez un step. Donc, vous pouvez revenir à step="any" avec mon code car le modèle le validera quand même.

Si vous souhaitez valider onblur, je pense qu’ajouter un repère visuel à l’utilisateur est également utile, comme la coloration du fond rouge. Si le navigateur de l'utilisateur ne prend pas en charge type="number", il sera remplacé par type="text". Si le navigateur de l'utilisateur ne prend pas en charge la validation du modèle HTML5, mon extrait de code JavaScript n'empêche pas le formulaire de soumettre, mais il donne une indication visuelle. Ainsi, pour les personnes dont le support HTML5 est médiocre et pour celles qui essaient de pirater la base de données avec JavaScript désactivé ou qui forgent des requêtes HTTP, vous devez quand même valider sur le serveur. Le point avec la validation sur le front-end est pour une meilleure expérience utilisateur. Donc, tant que la plupart de vos utilisateurs ont une bonne expérience, il n’est pas difficile de s’appuyer sur les fonctionnalités HTML5, à condition que le code fonctionne toujours et que vous puissiez le valider sur le back-end.

15
Ultimater

Étape 1: Accrochez votre zone de saisie de numéro HTML à un événement onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

ou dans le code HTML

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

Étape 2: Écrire la méthode setTwoDecimalPlace

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

Vous pouvez modifier le nombre de décimales en modifiant la valeur transmise à la méthode toFixed(). Voir documents MDN .

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer
14
Sachin Sudhakar Sonawane

Essayez ceci pour ne permettre que 2 décimales dans le type d'entrée

<input type="number" step="0.01" class="form-control"  />
8
Nilesh Gajare

J'ai trouvé que jQuery était ma meilleure solution.

$( "#my_number_field" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});
3
SamohtVII

La meilleure façon simple que je suis venu avec est-ce ✔

 <input min="0" max="1" step=".10" type="number" value="0">
0
Varun Pradhan

Utilisez ce code

<input type="number" step="0.01" name="amount" placeholder="0.00">

Par défaut, la valeur d'étape pour les éléments d'entrée HTML5 est step = "1".

0
Obaidul Haque