JavaScript-Bereich - autoNumeric (Zahlenformat)

Page / - zuletzt bearbeitet von awa am 19.06.2019, 09:07

autoNumeric (Zahlenformat)

zuletzt bearbeitet von awa

am 19.06.2019, 09:07

Inhaltsverzeichnis

Beispiel

Liste der häufigsten Optionen

Inhalt [ Verbergen ]

Beispiel

Liste der häufigsten Optionen

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 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:

Modernes JavaScript (ES6)

Legacy JavaScript (Internet Explorer Support)

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:

Modernes JavaScript (ES6)

Legacy JavaScript (Internet Explorer Support)

// 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.