Erstellen Sie die Währungseingabe in HTML

Ein HTML-Zahlenfeld kann einen numerischen Betrag entgegennehmen, Wertebereiche einschränken und nach einer Wertänderung eine festgelegte Anzahl von Dezimalstellen anzeigen. HTML bietet jedoch keinen eingebauten Eingabetyp für Währungen: type="number" fügt weder ein Währungssymbol noch eine Zifferngruppierung oder eine gebietsschemaspezifische Formatierung hinzu. Das folgende Beispiel verwendet HTML für die Zahleneingabe und jQuery, um den Wert zu begrenzen und zu runden.

Warum type="number" kein Währungsformat ist

<input type="number"> stellt dem Browser ein numerisches Eingabefeld bereit. Die Attribute min, max und step legen fest, welche Zahlenwerte zulässig sind; der Browser kann außerdem Steuerelemente für die Zahleneingabe anzeigen. Sie bestimmen jedoch nicht, wie Geldbeträge aussehen sollen. Ein Wert wie 99.9 bleibt eine Zahl ohne Währungssymbol oder gebietsschemaspezifische Trennzeichen.

Verwenden Sie dieses Eingabefeld, wenn Nutzer eine Zahl eingeben sollen und eine Bereichsbegrenzung sinnvoll ist. Für eine lokalisierte Anzeige mit Währungssymbol und Zifferngruppierung formatieren Sie den Wert separat, zum Beispiel mit JavaScripts Intl.NumberFormat. Die Formatierung eines Werts für die Anzeige ist außerdem unabhängig davon, wie Geldbeträge präzise gespeichert oder validiert werden. Bei Finanzberechnungen kommen häufig ganzzahlige Einheiten der kleinsten Währungsunterteilung oder eine Bibliothek für Dezimalarithmetik zum Einsatz.

Ein numerisches Eingabefeld mit Bereichs- und Genauigkeitsanforderungen erstellen

Die folgenden Attribute legen einen Anfangswert sowie beispielhafte Unter- und Obergrenzen fest. Passen Sie sie an die Anforderungen Ihrer Anwendung an. step="any" erlaubt Dezimalwerte, die andernfalls an der standardmäßigen Schrittweite von eins für Zahleneingaben scheitern würden. Das Attribut rundet Werte jedoch nicht selbst auf eine Dezimalstelle.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<input
  type="number"
  id="currencyInput"
  min="0.1"
  max="5000000.0"
  step="any"
  value="99.9"
/>

JavaScript kann eine endliche Zahl auf diese Grenzen beschränken und mit der Methode toFixed() sowie dem Argument 1 eine Zeichenfolge mit einer Nachkommastelle erzeugen. Dieses Beispiel wurde ausgeführt und gab 1234.6 aus:

const min = 0.1;
const max = 5000000.0;
const entered = 1234.56;
const bounded = Math.min(max, Math.max(min, entered));
console.log(bounded.toFixed(1));

1234.6

Änderungen mit JavaScript und jQuery verarbeiten

Das change-Ereignis wird ausgelöst, nachdem der Nutzer den Wert des Feldes geändert und diese Änderung bestätigt hat, häufig indem er das Eingabefeld verlässt. Die Eingabetaste muss dafür nicht gedrückt werden. Verwenden Sie stattdessen das input-Ereignis, wenn die Benutzeroberfläche bereits während der Eingabe reagieren soll. Bei einem Zahlenfeld liefert valueAsNumber eine Zahl oder NaN, wenn kein verwendbarer Zahlenwert vorliegt. Prüfen Sie den Wert, bevor Sie ihn begrenzen, damit der Handler ein noch unvollständiges oder geleertes Feld nicht durch eine Grenzzahl ersetzt.

Der folgende Handler liest min und max aus dem Eingabefeld, lässt einen nicht endlichen Wert unverändert, begrenzt einen endlichen Wert und schreibt anschließend die Zeichenfolge mit einer Nachkommastelle zurück. toFixed(1) rundet auf das nächste Zehntel und gibt eine Zeichenfolge zurück; die Methode rundet nicht immer auf. Das Ergebnis ist eine numerische Zeichenfolge und keine Währungsformatierung.

Das vollständige Beispiel für eine Währungseingabe verwenden

Dieses Beispiel für eine Browserseite setzt voraus, dass die Seite jQuery geladen hat. Das benutzerdefinierte Plugin fügt jedem ausgewählten Eingabefeld einen Handler hinzu. Der Code verwendet dieselben beispielhaften Bereichsgrenzen und denselben Anfangswert wie oben.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<input
  type="number"
  id="currencyInput"
  min="0.1"
  max="5000000.0"
  step="any"
  value="99.9"
/>

<script>
  $.fn.currencyInput = function () {
    return this.on("change", function () {
      const value = this.valueAsNumber;
      if (!Number.isFinite(value)) return;

      const min = Number.parseFloat($(this).attr("min"));
      const max = Number.parseFloat($(this).attr("max"));
      const bounded = Math.min(max, Math.max(min, value));
      $(this).val(bounded.toFixed(1));
    });
  };

  $(function () {
    $("#currencyInput").currencyInput();
  });
</script>

Beim Laden der Seite zeigt das Feld zunächst 99.9 an. Nach einer bestätigten Änderung wird ein endlicher Wert unterhalb der Untergrenze auf 0.1 und ein Wert oberhalb der Obergrenze auf 5000000.0 gesetzt. Ein Wert innerhalb des Bereichs wird auf eine Nachkommastelle gerundet. Während der Eingabe ändert der Code den Wert nicht, da er auf change wartet.

Was das Beispiel validiert und was nicht

Die HTML-Einschränkungen helfen dem Browser, Werte außerhalb des zulässigen Bereichs zu erkennen. Der Handler begrenzt endliche Werte ausdrücklich, sobald eine Änderung bestätigt wurde. Ein leeres oder nicht endliches Feld bleibt unverändert, damit der Nutzer den Wert korrigieren kann; dieses Beispiel macht das Feld nicht zu einem Pflichtfeld. Muss die Anwendung solche Werte ablehnen, zeigen Sie eine separate Validierungsmeldung an und verhindern Sie das Absenden, bis die Eingabe gültig ist.

Dieses Verhalten garantiert nicht, dass übermittelte Daten gültig oder vertrauenswürdig sind. Validieren Sie den Wert erneut auf dem Server und wenden Sie dort die für die Anwendung geltenden Regeln zu monetärer Genauigkeit und Rundung an. toFixed(1) eignet sich hier, um eine numerische Darstellung mit einer Nachkommastelle zu veranschaulichen. Die Methode fügt jedoch weder ein Währungssymbol noch eine Zifferngruppierung oder Gebietsschemaauswahl hinzu und liefert auch keine vollständige Darstellung von Finanzbeträgen.