Number KIT

Description and examples API

Use maskitoNumberOptionsGenerator to create a mask for entering a formatted number.

Despite the name of the mask, element's raw value is still string.

Use maskitoParseNumber to get number-type value.

Use maskitoStringifyNumber to get the masked string from number-type value.

High precision

Use `maximumFractionDigits` parameter to configure the number of digits after decimal separator.

π -value

Separators

Use `decimalSeparator` and `thousandSeparator` to get mask with locale specific representation of numbers.

In Germany people use comma as decimal separator and dot for thousands

Type number like a German

Postfix

Use `postfix` parameter to set non-removable text after the number.
Additionally you can use `maskitoCaretGuard` to clamp caret inside allowable range.
This example also shows how to restrict the greatest permitted value via `max` parameter.

Decimal zero padding

Use `minimumFractionDigits` to always show trailing zeroes.
Non removable dollar sign is achieved by using `prefix` parameter.

Cost

Minus sign

Use `minusSign` parameter to configure the character which indicates that a number is negative.
In this example hyphen is used as `minusSign`

Minus before prefix

Use `negativePattern` property to configure order of prefix and minus sign (by default, prefix is always placed before minus).

Dynamic decimal zero padding

You can change options on the fly to build complex logic.
This example shows how to initially disable decimal zero padding and enable it only after user inserts decimal separator.

Enable decimal zero padding by typing dot