Wiki-Quellcode von autoNumeric (Zahlenformat)
Zeige letzte Bearbeiter
author | version | line-number | content |
---|---|---|---|
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. |