Erstellen Sie die Währungseingabe in HTML
In diesem Artikel erfahren Benutzer, wie sie das normale HTML-Feld <input> in das Währungseingabefeld umwandeln. Wir werden HTML und jQuery verwenden, um unser Ziel zu erreichen.
Verwenden Sie die JavaScript-Methode toFixed(), um die normale <input> in eine Währungseingabe in HTML umzuwandeln
In HTML ist ein normales <input>-Element verfügbar, und wir können seinen Typ gemäß unseren Anforderungen festlegen. Wir können den Typ nicht zu einer Währungseingabe machen, indem wir den Typ einfach auf Zahl setzen; Wir müssen weitere Änderungen mit JavaScript oder jQuery vornehmen.
Zum Beispiel können wir das Feld <input> in HTML wie unten erstellen; es enthält einige Attribute. Das Attribut type schlägt die Art der Eingabe vor, die es braucht.
Die Attribute min und max schlagen die minimalen bzw. maximalen Zahlenwerte vor, die es braucht. Das Attribut id ist die eindeutige ID des Elements <input>, mit der wir in jQuery auf das Element zugreifen können.
<input type="number" id="currencyInput" min="0.1" max="5000000.0" value="99.9" />
Wir werden jQuery verwenden, um das obige <input>-Feld in eine Währungseingabe umzuwandeln. Wir haben die anonyme Funktion erstellt und in der Variablen inovkeCurrencyInput gespeichert.
Benutzer können unten sehen, wie wir eine anonyme Funktion in jQuery erstellen können.
$.fn.inovkeCurrencyInput = function() {
// function code
}
Jetzt fügen wir den Event-Listener change mit jQuery zum Eingabeelement innerhalb der Funktion hinzu. Es wird uns helfen, die Änderungen zu erkennen, wenn wir etwas in die Zahleneingabe eingeben.
Hier ist der jQuery-Code zum Hinzufügen des Event-Listeners change innerhalb der Funktion invokeCurrencyInput().
$(this).change(function() {
});
Danach greifen wir mit der Eigenschaft valueAsNumber auf den Wert der Zahleneingabe zu, wenn ein Benutzer etwas zur Zahleneingabe hinzufügt oder löscht. Außerdem greifen wir mit der Methode attr() auf die Attribute min und max des Eingabefelds zu.
Nachdem wir auf die Attribute min und max zugegriffen haben, werden wir den Float-Wert daraus mit der JavaScript-Methode parseFloat() analysieren, wie unten gezeigt.
var currencyvalue = this.valueAsNumber;
var maxValue = parseFloat($(this).attr('max'));
var minValue = parseFloat($(this).attr('min'));
Jetzt haben wir Mindest- und Höchstwerte, die das Währungseingabefeld akzeptieren kann. Außerdem haben wir den aktuellen Wert des Eingabefeldes in der Variable currencyValue gespeichert.
Mit der if-Anweisung prüfen wir, ob currencyValue zwischen minValue und maxValue liegt.
if (currencyvalue > maxValue) {
currencyvalue = maxValue;
}
if (currencyvalue < minValue) {
currencyvalue = minValue;
}
Wir werden die Methode number.toFixed(precision) verwenden, um den currencyValue auf eine bestimmte Genauigkeit zu runden. In unserem Fall ist der Genauigkeitswert 1. Wenn Benutzer also einen Eingabewert mit mehr als 1 Genauigkeit eingeben, rundet ein Eingabefeld den Zahlenwert automatisch auf und legt die einfache Genauigkeit fest.
Hier haben wir gezeigt, wie man die Methode number.toFixed() verwendet. Außerdem setzen wir den endgültig formatierten currencyValue als Wert des <input>-Elements.
currencyvalue = currencyvalue.toFixed(1);
$(this).val(currencyvalue);
Zuletzt rufen wir die Funktion invokeCurrencyInput() für das Element <input> auf, wo immer das Dokument geladen wird. Hier greifen wir über seine ID auf das Element <input> zu.
$(document).ready(function() {
$('input#currencyInput').inovkeCurrencyInput();
});
Vollständiger Quellcode - HTML + jQuery:
Wir haben auch das jQuery-CDN im folgenden Beispielcode hinzugefügt. Benutzer müssen es hinzufügen, um jQuery mit dem HTML-Code aufzurufen.
<html>
<body>
$
<input
type="number"
id="currencyInput"
min="0.1"
max="5000000.0"
value="99.9"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"
integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
$.fn.inovkeCurrencyInput = function () {
$(this).change(function () {
var currencyvalue = this.valueAsNumber;
var maxValue = parseFloat($(this).attr("max"));
if (currencyvalue > maxValue) currencyvalue = maxValue;
var minValue = parseFloat($(this).attr("min"));
if (currencyvalue < minValue) currencyvalue = minValue;
currencyvalue = currencyvalue.toFixed(1);
$(this).val(currencyvalue);
});
};
$(document).ready(function () {
$("input#currencyInput").inovkeCurrencyInput();
});
</script>
</body>
</html>
Der Code zeigt im Eingabefeld zunächst den Wert 99.9 an. Wenn der Benutzer einen Wert außerhalb von 0.1 und 5000000.0 eingibt, werden die Werte 0.1 und 5000000.0 entsprechend eingestellt; Andernfalls rundet unser Code den Wert auf eine einzelne Präzisionsziffer auf oder ab und zeigt ihn im Eingabefeld an.
Benutzer müssen die Taste enter drücken, um den Wert zu übermitteln und zu runden.
Auf diese Weise können wir das normale Eingabefeld in das Währungseingabefeld umwandeln, das Mindest- und Höchstgrenzen hat, und Benutzer können auch Werte mit einer bestimmten Anzahl von Stellen eingeben.
