Autoriser 2 décimales dans <type d'entrée = "nombre">

j'ai un <input type="number"> et je veux restreindre la saisie des utilisateurs à des nombres purement ou des nombres avec des décimales 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">

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

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

Si quelqu'un recherche une expression régulière qui n'autorise que les nombres avec 2 décimales en option

^\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);
});

Pour la monnaie, je suggère:

<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 lorsque le formulaire sera envoyé, pas onblur. Vous n'avez pas besoin du stepsi vous en avez un patternet vous n'en avez pas besoin patternsi vous en avez un step. Vous pouvez donc revenir àstep="any" mon code puisque le modèle le validera de toute façon.

Si vous souhaitez valider onblur, je pense que donner à l'utilisateur un repère visuel est également utile, comme colorier l'arrière-plan en rouge. Si le navigateur de l'utilisateur ne le prend pas en charge, type="number"il reviendra à 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 la soumission du formulaire, mais il donne un signal visuel. Donc, pour les personnes avec une mauvaise prise en charge HTML5 et les personnes qui tentent de pirater la base de données avec JavaScript désactivé ou qui forgent des demandes HTTP, vous devez de toute façon 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 est bon de s'appuyer sur les fonctionnalités HTML5 à condition que le code fonctionne toujours et que vous puissiez valider sur le back-end.

É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: Écrivez la setTwoDecimalPlaceméthode

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

Vous pouvez modifier le nombre de décimales en variant la valeur passée dans la toFixed()méthode. Voir les documents MDN .

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer

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

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

Essayez ceci pour autoriser seulement 2 décimales dans le type d'entrée

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

Ou utilisez jQuery comme suggéré par @SamohtVII

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

Utilisez ce code

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

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

Ecrivez

<input type="number" step="0.1" lang="nb">

lang = 'nb "vous permet d'écrire vos nombres décimaux avec une virgule ou un point

En entrée:

step="any"
class="two-decimals"

Sur le script:

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});