autoNumeric ist eine Javascript-Bibliothek zur Eingabe von Zahlen in länderspezifischen Formaten. Diese Bibliothek ist bereits in FORMCYCLE eingebunden, sodass sie in Formularen direkt genutzt werden kann. Auf der offiziellen Webseite findet sich eine ausführliche Erklärung. Im Folgendenen sei ein kurzer Überblick über die Möglichkeiten gegeben.
Beispiel
In dem Eingabefeld mit dem Namen tfGewicht soll ein Gewicht in Kilogram (Einheit kg) eingegeben werden. Dabei sollen höchstens 3 Dezimalstellen erlaubt sein und das Gewicht soll sich zwischen 1 und 100 befinden. Wie in Deutschland üblich, soll das Komma (,) als Dezimalseparator verwendet werden.
Zuerst wird der Datentyp des Felds tfGewicht auf Text gestellt. Die Validierung wird von autoNumeric übernommen.
Im FORMCYCLE-Designer wird im JavaScript-Bereich nun zuerst das Textfeld mittels jQuery selektiert:
Modern JavaScript (ES6)
const tfGewicht = $("[name='tfGewicht']");
Legacy JavaScript (Internet Explorer Support)
var tfGewicht = $("[name='tfGewicht']");
Anschließend wird die Funktion jQuery.fn.autonumeric aufgerufen und die gewünschten Einstellungen übergeben:
tfWeight.autoNumeric({ aDec: ',', //Komma als Dezimalseparator aSep: '', // kein Trennzeichen für Tausender aSign: ' kg', // Einheit kg pSign: 's', // Einheit nach der Zahl vMin: 1, // Mindestwert 1 vMax: 100, // Höchstwert 100 mDec: 3, // Maximal 3 Dezimalstellen aPad: false // Es können auch weniger als 3 Dezimalstellen sein. });
Im Textfeld tfGewicht kann der Nutzer nun z.B. 3,99 eingeben. Dies wird als 3,99 kg dargestellt. autoNumeric stellt sicher, dass es sich um eine gültige Zahl handelt. Zudem kann der Wert als Zahl wie folgt in Javascript abgerufen werden, falls er für JavaScript-Funktionen gebraucht wird.
// Liefert den Wert als Zahl zurück. const asNumber = tfGewicht.autoNumeric("get");
Legacy JavaScript (Internet Explorer Support)
// Liefert den Wert als Zahl zurück. var asNumber = tfGewicht.autoNumeric("get");
Wenn erforderlich, kann auch ein Wert mittels JavaScript gesetzt werden:
// Setzt den Wert auf 49.5. Wird im Textfeld als "49,5 kg" angezeigt. tfGewicht.autoNumeric("set", 49.5);
Beim Absenden des Formulars wird immer der durch autoNumeric formatierte Wert gesendet.
Liste der häufigsten Optionen
autoNumeric hat viele Optionen, hier sind einige der gebräuchlichsten aufgelistet. Alle Optionen sind optional und haben Standardwerte.
- aDec
- Dezimalseparator
- aSep
- Gruppenseparator. Kein Separator, wenn leerer String. Z.B. für die Anzeige von 1.234,55
- dGroup
- Anzahl von Stellen, die in einer Gruppe zusammengefasst werden. Mit Standardwert 3 wird etwa die Zahl 123456 als 123.456 dargestellt.
- aSign
- Einheit. Es kann ein beliebiger String verwendet werden, damit sind auch die Einheiten EUR, kg, °C, 粁 (Kilometer) oder ¥ (Japanischer Yen) möglich.
- pSign
- Ob die Einheit vor oder hinter dem Zahlenwert stehen soll. Bei p (steht für Präfix) davor , bei s (steht für Suffix) dahinter.
- vMin
- Minimalwert. Wird etwa 1 gesetzt, kann kein Wert gleicher 1 eingegeben werden.
- vMax
- Maximalwert. Wird etwa 100 gesetzt , kann kein Wert größer 100 eingegeben werden.
- mDec
- Höchstanzahl von Dezimalstellen.
Siehe hierzu auch die Hilfe zur Funktion jQuery.fn.autonumeric. Diese Optionen sind auf der Webseite von autoNumeric auch noch einmal detailliert beschrieben. Zudem gibt es eine Webmaske, über die obige Einstellungen komfortabel konfiguriert werden können.
War dieser Artikel hilfreich?
Das ist großartig!
Vielen Dank für das Feedback
Leider konnten wir nicht helfen
Vielen Dank für das Feedback
Feedback gesendet
Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren