Wiki source code of autoNumeric (Zahlenformat)
Show last authors
author | version | line-number | content |
---|---|---|---|
1 | {{content/}} | ||
2 | |||
3 | {{jsdoc page="jquery" name="autonumeric"}}autoNumeric{{/jsdoc}} is a Javascript library for working with numbers and country specific number formats. This library is already included in forms and does not have to be loaded separately. See the [[help pages of that library>>url:https://web.archive.org/web/20200613003112/https://www.decorplanit.com/plugin/]] for an in-depth explanation. The following is a brief overview of this library. A [[example form>>https://formexchange.formcycle.eu/formcycle/form/provide/223/?lang=en]] you will find in the form store. | ||
4 | |||
5 | {{figure image="designer_advanced_autonumeric_en.png" width="500"}} | ||
6 | Making use of //autoNumeric// to implement different numerical formats with or without units. | ||
7 | {{/figure}} | ||
8 | |||
9 | == Example == | ||
10 | |||
11 | The input field Namen is named //tfWeight//. We would like it to show the unit kg and have a maximum of three decimal digits. We also want to use an English-style decimal separator (a period {{code language="none"}}.{{/code}}). | ||
12 | |||
13 | First, we set the [[data type>>doc:Formcycle.Designer.Form.FormElements.Input]] of the input field //text//. The library autoNumeric will handle the validation for us. | ||
14 | |||
15 | Next, we go to the [[JavaScript tab>>doc:Formcycle.Designer.Form.CodingPanel.ScriptTab.WebHome]] of the {{designer/}} and select the input field via jQuery. | ||
16 | |||
17 | {{js}} | ||
18 | const tfWeight = $("[name='tfWeight']"); | ||
19 | {{/js}} | ||
20 | |||
21 | {{jsIE}} | ||
22 | var tfWeight = $("[name='tfWeight']"); | ||
23 | {{/jsIE}} | ||
24 | |||
25 | Now we initialize the autoNumeric library by calling the method {{jsdoc page="jquery" name="autonumeric"/}}. We also pass it the options we want: | ||
26 | |||
27 | {{code language="javascript"}} | ||
28 | tfWeight.autoNumeric({ | ||
29 | aDec: '.', // Period as decimal separator | ||
30 | aSep: '', // No delimiter symbol for thousands. | ||
31 | aSign: ' kg', // Unit kg | ||
32 | pSign: 's', // Place the unit at the end of the number (s=suffix). | ||
33 | vMin: 1, // Only allow values >= 1 | ||
34 | vMax: 100, // Only allow values <= 100 | ||
35 | mDec: 3, // At most three decimal places. | ||
36 | aPad: false // Do not pad to three decimal places (eg. 5.6 instead of 5.600). | ||
37 | }) | ||
38 | {{/code}} | ||
39 | |||
40 | This allows the user to enter //3.99//, which will displayed as //3.99 kg//. The JavaScript library //autoNumeric// takes care of validating the input and displaying the appropriate error messages. It also provides functions for retrieving the plain numeric value, eg. //3.99{// instead of //3.99 kg//. | ||
41 | |||
42 | To retrieve the value as a plain number, use the //get// function: | ||
43 | |||
44 | {{js}} | ||
45 | const number = tfWeight.autoNumeric("get") // Returns the value as a number. | ||
46 | {{/js}} | ||
47 | |||
48 | {{jsIE}} | ||
49 | var number = tfWeight.autoNumeric("get") // Returns the value as a number. | ||
50 | {{/jsIE}} | ||
51 | |||
52 | Finally, you can also change the value with Javascript: | ||
53 | |||
54 | {{code language="javascript"}} | ||
55 | // Sets the value to 49.5. It will be shown as "49.5 kg" in the input field. | ||
56 | tfWeight.autoNumeric("set", 49.5); | ||
57 | {{/code}} | ||
58 | |||
59 | When submitting the form, the formatted number will be sent and not the plain numeric value, eg. {{code language="none"}}49.5 kg{{/code}}. | ||
60 | |||
61 | == Common options == | ||
62 | |||
63 | autoNumeric accepts many options, all of which are optional and have got defalut values. The following are some of the most common options: | ||
64 | |||
65 | ; aDec | ||
66 | : Decimal separator. | ||
67 | ; aSep | ||
68 | : Group separator. No separator when there's an empty string. E.g. for displaying //1.234,55// | ||
69 | ; dGroup | ||
70 | : Number of digits that will be grouped. The default value is {{code language="none"}}3{{/code}}, which will insert a separator for each power of 1000 (10^3). For example, the number {{code language="none"}}123456{{/code}} will is then formatted as //123.456// | ||
71 | ; aSign | ||
72 | : Unit. This allows any arbitrary string to be used, such as EUR, kg, °C, {{html}}粁{{/html}} (kilometers), or ¥ (Japanese Yen) | ||
73 | ; pSign | ||
74 | : Whether the unit should be placed before or after the number. Use //p// (prefix) to place the unit before the number, and //s// (suffix) to place it after the number | ||
75 | ; vMin | ||
76 | : Minimum value. When setting this to 1, a number equal to or greater than 1 must be entered | ||
77 | ; vMax | ||
78 | : Maximum value. When setting this to the number 100, a number equal to or less than 100 must be entered | ||
79 | ; mDec | ||
80 | : Maximum number of decimals places | ||
81 | |||
82 | See also the documentation for the method {{jsdoc page="jquery" name="autonumeric"/}}. These options are also described in detail on the [[website of autoNumeric>>url:https://github.com/autoNumeric/autoNumeric/blob/next/doc/Documentation.md]]. In addition, there is a [[webmask>>url:http://www.decorplanit.com/plugin/]] which can be configured comfortably using the above settings. |