Zum Inhalt springen

Wiki-Quellcode von autoNumeric (Zahlenformat)

Zeige letzte Bearbeiter
1 {{content/}}
2
3 {{jsdoc page="jquery" name="autonumeric"}}autoNumeric{{/jsdoc}} ist eine Javascript-Bibliothek zur Eingabe von Zahlen in länderspezifischen Formaten. Diese Bibliothek ist bereits in {{formcycle case="acc"/}} eingebunden, sodass sie in Formularen direkt genutzt werden kann. Auf der [[offiziellen Webseite>>url:https://web.archive.org/web/20200613003112/https://www.decorplanit.com/plugin/]] findet sich eine ausführliche Erklärung. Im Folgendenen sei ein kurzer Überblick über die Möglichkeiten gegeben. Ein [[Beispielformular >>https://formexchange.formcycle.eu/formcycle/form/provide/223/]]finden Sie im Formular Store.
4
5
6 {{figure image="designer_advanced_autonumeric_de.png" width="500"}}
7 Ein Beispiel für die Verwendung von //autoNumeric// zur Umsetzung verschiedener Zahlenformat mit oder ohne Währung beziehungsweise Einheiten.
8 {{/figure}}
9
10 == Beispiel ==
11
12 In dem Eingabefeld mit dem [[Namen>>doc:Formcycle.Designer.Form.ElementProperties.BaseProperties.WebHome]] //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.
13
14 Zuerst wird der [[Datentyp>>doc:Formcycle.Designer.Form.FormElements.Input||anchor="HBedingungen"]] des Felds //tfGewicht// auf Text gestellt. Die Validierung wird von autoNumeric übernommen.
15
16 Im {{designer case="dat"/}} wird im [[JavaScript-Bereich>>doc:WebHome]] nun zuerst das Textfeld mittels jQuery selektiert:
17
18 {{js}}
19 const tfGewicht = $("[name='tfGewicht']");
20 {{/js}}
21
22 {{jsIE}}
23 var tfGewicht = $("[name='tfGewicht']");
24 {{/jsIE}}
25
26 Anschließend wird die Funktion {{jsdoc page="jquery" name="autonumeric"/}} aufgerufen und die gewünschten Einstellungen übergeben:
27
28 {{code language="javascript"}}
29 tfWeight.autoNumeric({
30 aDec: ',', //Komma als Dezimalseparator
31 aSep: '', // kein Trennzeichen für Tausender
32 aSign: ' kg', // Einheit kg
33 pSign: 's', // Einheit nach der Zahl
34 vMin: 1, // Mindestwert 1
35 vMax: 100, // Höchstwert 100
36 mDec: 3, // Maximal 3 Dezimalstellen
37 aPad: false // Es können auch weniger als 3 Dezimalstellen sein.
38 });
39 {{/code}}
40
41 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:
42
43 {{js}}
44 // Liefert den Wert als Zahl zurück.
45 const asNumber = tfGewicht.autoNumeric("get");
46 {{/js}}
47
48 {{jsIE}}
49 // Liefert den Wert als Zahl zurück.
50 var asNumber = tfGewicht.autoNumeric("get");
51 {{/jsIE}}
52
53 Wenn erforderlich, kann auch ein Wert mittels JavaScript gesetzt werden:
54
55 {{code language="javascript"}}
56 // Setzt den Wert auf 49.5. Wird im Textfeld als "49,5 kg" angezeigt.
57 tfGewicht.autoNumeric("set", 49.5);
58 {{/code}}
59
60 Beim Absenden des Formulars wird immer der durch //autoNumeric// formatierte Wert gesendet.
61
62 == Liste der häufigsten Optionen ==
63
64 autoNumeric hat viele Optionen, hier sind einige der gebräuchlichsten aufgelistet. Alle Optionen sind optional und haben Standardwerte.
65
66 ; aDec
67 : Dezimalseparator
68 ; aSep
69 : Gruppenseparator. Kein Separator, wenn leerer String. Z.B. für die Anzeige von //1.234,55//
70 ; dGroup
71 : Anzahl von Stellen, die in einer Gruppe zusammengefasst werden. Mit Standardwert //3// wird etwa die Zahl //123456// als //123.456// dargestellt
72 ; aSign
73 : Einheit. Es kann ein beliebiger String verwendet werden, damit sind auch die Einheiten EUR, kg, °C, {{html}}粁{{/html}} (Kilometer) oder ¥ (Japanischer Yen) möglich.
74 ; pSign
75 : 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
76 ; vMin
77 : Minimalwert. Wird etwa //1// gesetzt, kann kein Wert gleicher //1// eingegeben werden.
78 ; vMax
79 : Maximalwert. Wird etwa //100// gesetzt , kann kein Wert größer //100// eingegeben werden.
80 ; mDec
81 : Höchstanzahl von Dezimalstellen.
82
83 Siehe hierzu auch die Hilfe zur Funktion {{jsdoc page="jquery" name="autonumeric"/}}. Diese Optionen sind auf der [[Webseite von autoNumeric>>url:https://github.com/autoNumeric/autoNumeric/blob/next/doc/Documentation.md]] auch noch einmal detailliert beschrieben. Zudem gibt es eine [[Webmaske>>url:http://www.decorplanit.com/plugin/]], über die obige Einstellungen komfortabel konfiguriert werden können.