autoNumeric (Zahlenformat)

Inhalt [ Verbergen ]

autoNumeric ist eine Javascript-Bibliothek zur Eingabe von Zahlen in länderspezifischen Formaten. Diese Bibliothek ist bereits in Xima® 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. Ein Beispielformular finden Sie im Formular Store.

Ein Beispiel für die Verwendung von autoNumeric zur Umsetzung verschiedener Zahlenformat mit oder ohne Währung beziehungsweise Einheiten.

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 Xima® Formcycle-Designer wird im JavaScript-Bereich nun zuerst das Textfeld mittels jQuery selektiert:

const tfGewicht = $("[name='tfGewicht']");
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");
// 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.