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

221

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">
Nubteens
quelle
2
type = "number" bietet keine breite Browserunterstützung. Es ist besser, nur ein Textfeld mit etwas Javascript zu verwenden, um sicherzustellen, dass Sie die gewünschte Eingabe erhalten.
www139
6
Ja, aber die Eingaben fallen type="text"sowieso zurück. Was macht es also aus?
Ultimater
Mögliches Duplikat von Gibt es in HTML5 einen Float-Eingabetyp?
OhadR
/^\d+\.\d{2,2}$/ arbeitete für mich 0,00 zu verlangen
ZStoneDPM

Antworten:

333

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

Michael Benjamin
quelle
38
Dies ist nicht die richtige Antwort. Schritt regelt nur, was passiert, wenn Sie klicken oder drücken, und schränkt nichts ein.
Ini
1
@Michael_B Unabhängig davon, was die Spezifikation erhofft, ist dies ziemlich trivial zu testen: jsfiddle.net/9hvm0b5u erlaubt immer noch die Eingabe von mehr als 2 Dezimalstellen. Die Schritte regeln nur, um was die +/- Tasten den Betrag verschieben. (Chrome)
Nathan
3
@Michael_B Der Benutzer wird nicht daran gehindert, eine Zahl wie 500.12345in einer der Eingaben einzugeben. Vielleicht ist unser Verständnis der Anforderungen anders.
Nathan
3
Es ist zu beachten, dass der Benutzer zwar eine beliebige Anzahl von Ziffern nach der Dezimalstelle eingeben kann, die meisten Browser jedoch die Übermittlung des Formulars mit einem ungültigen Wert und der CSS-Selektoren nicht zulassen :validund :invalidwie erwartet angewendet werden.
Andrew Dinmore
1
@ Nathan, es ist auch trivial, die Browser-Validierung zu testen. Versuchen Sie, einen Wert mit mehr als 2 Dezimalstellen einzureichen
imclean
43

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);
});
Weston Ganger
quelle
2
Was ist der Zweck von setTimeout ()?
Derek
2
@Derek. Ich gehe davon aus, dass der regex.test das DOM nicht blockiert. Suchen Sie dies: developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
christo8989
2
@Derek Ich kann nur davon ausgehen, dass ich setTimeout()warten muss, bis das keydownEreignis abgeschlossen ist, bevor newValich das einstelle (andernfalls ist es dasselbe wie das oldVal). Bei einem Timeout von 0 ist dies jedoch sinnlos und funktioniert nicht, da beide Werte häufig gleich sind (in Firefox). Wenn Sie es beispielsweise auf 1 setzen, funktioniert es einwandfrei.
Alstr
Sie haben meine Bearbeitung in zwei verschiedenen Posts mit dem Grund zurückgesetzt, dass "nicht genehmigte Bearbeitung die Formatierungsqualität der Antwort beeinträchtigt". Können Sie bitte erklären, wie meine Bearbeitung nicht genehmigt wird und wie genau sich die Qualität der Antwort verschlechtert? (IMO, es verbessert es, da die Leute den Code direkt von der Post ausführen könnten und nicht zu JSFiddle gehen müssen).
Doppelter Piepton
21

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.

Ultimater
quelle
2
Nach MDN , patternfunktioniert nicht für input type=number:<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs can't contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes, as explained above.
izogfif
@izogfif Gute Notiz. Beachten Sie auch, dass ich tatsächlich festgestellt habe, dass Sie nicht beide benötigen, und drei Möglichkeiten angegeben habe: Schritt, Muster und Unschärfe. Meine damalige Begründung war, wenn ein Browser aus irgendeinem Grund an einem erstickt, hat er den anderen. Wahrscheinlich ist es heutzutage sicher, sich bei der Frontend-Validierung auf step zu verlassen.
Ultimater
16

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
Sachin Sudhakar Sonawane
quelle
3
parseFloat (parseFloat (this.value) .toFixed (2)); Wenn Sie einen Dezimal- oder Zahlentyp wünschen, können Sie das Ganze in parseFloat () einschließen, da die Methode toFixed () standardmäßig eine Zeichenfolge zurückgibt.
Spacedev
6

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

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

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);
});
Nilesh Gajare
quelle
21
Dies beschränkt Dezimalstellen nicht auf 2 Stellen in Chrome 57
mintedsky
1
Das ist nicht richtig. Schritt regelt nur, was passiert, wenn Sie klicken oder drücken, und schränkt nichts ein.
Ini
Schritt verhindert auch die Eingabe von Zahlen wie 1.000.
Zapnologica
-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".

Obaidul Haque
quelle
-4

einfach schreiben

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

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

ILLUSTRAY KING
quelle
"lang = 'nb' lässt Sie Ihre Dezimalzahlen mit Komma oder Punkt schreiben" Kann für nichts anderes sprechen, aber das funktioniert in Chrome für mich nicht.
Andrew Dinmore
-9

Bei Eingabe:

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

Im Skript:

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});
xemasiv
quelle
5
Bitte vermeiden Sie die Verwendung von Bögen in Ihrem Beitrag. Und denken Sie daran , nett zu sein
James