it-swarm.com.de

Lassen Sie in <input type = "number"> 2 Dezimalstellen zu

Ich habe einen <input type="number"> und 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">
148
nubteens

Verwenden Sie anstelle von step="any", das eine beliebige Anzahl von Dezimalstellen zulässt, step=".01", das bis zu zwei Dezimalstellen zulässt.

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

231
Michael_B

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

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

Als 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);
});
25
Weston Ganger

Als 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 überprüft, wenn das Formular gesendet wird, und nicht "onblur". Sie brauchen das step nicht, wenn Sie ein pattern haben, und Sie brauchen kein pattern, wenn Sie ein step haben. Sie können also mit meinem Code zu step="any" zurückkehren, da das Muster es trotzdem validiert.

Wenn Sie Unschärfe überprüfen möchten, ist es meines Erachtens auch hilfreich, dem Benutzer einen visuellen Hinweis zu geben, z. B. den Hintergrund rot zu färben. Wenn der Browser des Benutzers type="number" nicht unterstützt, wird auf type="text" zurückgegriffen. Wenn der Browser des Benutzers die HTML5-Musterüberprüfung nicht unterstützt, verhindert mein JavaScript-Snippet das Senden des Formulars nicht, gibt jedoch einen visuellen Hinweis. Für Leute mit schlechter HTML5-Unterstützung und für Leute, die versuchen, sich mit deaktiviertem JavaScript in die Datenbank zu hacken oder HTTP-Anforderungen zu fälschen, müssen Sie die Validierung 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 im Back-End validieren.

15
Ultimater

Schritt 1: Verknüpfen Sie Ihr HTML-Zahlen-Eingabefeld 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 Methode setTwoDecimalPlace

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

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

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

Versuchen Sie dies, um nur 2 Dezimalstellen im Eingabetyp zuzulassen

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

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

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

Die beste und einfachste Art, wie ich dazu gekommen bin, ist diese Is

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

Verwenden Sie diesen Code

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

Der Standardwert für "Step" für HTML5-Eingabeelemente ist "step =" 1 ".

0
Obaidul Haque