Erlaube 2 Dezimalstellen in <input type = “number”>

Ich habe eine <input type="number">und ich möchte die Eingabe der Benutzer auf reine Zahlen oder Zahlen mit Dezimalstellen bis zu 2 Dezimalstellen beschränken.

Grundsätzlich bitte ich um eine Preisangabe.

Ich wollte Regex vermeiden. Gibt es eine Möglichkeit, dies zu tun?

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

Anstatt step="any", die für eine beliebige Anzahl von Dezimalstellen erlaubt, die Verwendung step=".01", die bis zu zwei Dezimalstellen erlaubt.

Weitere Details in der Spezifikation: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

Wenn jemand nach einem regulären Ausdruck sucht, der nur Zahlen mit optionalen 2 Dezimalstellen zulässt

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

Zum Beispiel habe ich unten eine Lösung gefunden, die ziemlich zuverlässig ist

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

Für die Währung würde ich vorschlagen:

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

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

Die HTML5-Eigenschaften "step", "min" und "pattern" werden beim Senden des Formulars überprüft, nicht bei Unschärfe. Sie brauchen das nicht, stepwenn Sie ein haben, patternund Sie brauchen kein, patternwenn Sie ein haben step. Sie können also step="any"mit meinem Code zurückkehren, da das Muster ihn sowieso validiert.

Wenn Sie onblur validieren möchten, ist es meiner Meinung nach auch hilfreich, dem Benutzer einen visuellen Hinweis zu geben, z. B. den Hintergrund rot zu färben. Wenn der Browser des Benutzers dies nicht unterstützt type="number", wird auf zurückgegriffen type="text". Wenn der Browser des Benutzers die HTML5-Musterüberprüfung nicht unterstützt, verhindert mein JavaScript-Snippet nicht das Senden des Formulars, gibt jedoch einen visuellen Hinweis. Für Personen mit schlechter HTML5-Unterstützung und Personen, die versuchen, mit deaktiviertem JavaScript in die Datenbank zu hacken oder HTTP-Anforderungen zu fälschen, müssen Sie die Überprüfung auf dem Server trotzdem erneut durchführen. Der Punkt mit der Validierung im Front-End ist für eine bessere Benutzererfahrung. Solange die meisten Ihrer Benutzer eine gute Erfahrung haben, können Sie sich auf HTML5-Funktionen verlassen, vorausgesetzt, der Code funktioniert weiterhin und Sie können ihn im Back-End überprüfen.

Schritt 1: Verknüpfen Sie Ihr Eingabefeld für die HTML-Nummer mit einem Onchange-Ereignis

myHTMLNumberInput.onchange = setTwoNumberDecimal;

oder im HTML-Code

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

Schritt 2: Schreiben Sie die setTwoDecimalPlaceMethode

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

Sie können die Anzahl der Dezimalstellen ändern, indem Sie den an die toFixed()Methode übergebenen Wert variieren . Siehe MDN-Dokumente .

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

Ich fand, dass die Verwendung von jQuery meine beste Lösung war.

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

Versuchen Sie dies, um nur 2 Dezimalstellen im Eingabetyp zuzulassen

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

Oder verwenden Sie jQuery, wie von @SamohtVII vorgeschlagen

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

Verwenden Sie diesen Code

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

Standardmäßig ist der Schrittwert für HTML5-Eingabeelemente step = "1".

einfach schreiben

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

lang = 'nb "lässt Sie Ihre Dezimalzahlen mit Komma oder Punkt schreiben

Bei Eingabe:

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

Im Skript:

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