Each example comes with a live input you can play with, and the options used to get that result. To build your own format, use the configurator.
Predefined language options
These predefined options directly set the format and currency of a country.
French
The format used by the French
By default this use the alternative way of writing numbers; officially the French use the non breakable space ' ' for the digital group separator.
However, the dot '.' is more and more used since it allow a better legibility.
You can change that by customizing the digitalGroupSeparator option.
rawValue:
new AutoNumeric('#french', 'French');Spanish
The format used by the Spanish
rawValue:
new AutoNumeric('#spanish', 'Spanish');rawValue:
new AutoNumeric('#north-american', 'NorthAmerican');British
The format used by the British
rawValue:
new AutoNumeric('#british', 'British');Swiss
The format used by the Swiss
rawValue:
new AutoNumeric('#swiss', 'Swiss');Japanese
The format used by the Japanese
rawValue:
new AutoNumeric('#japanese', 'Japanese');Chinese
The format used by the Chinese
rawValue:
new AutoNumeric('#chinese', 'Chinese');Brazilian
The format used by the Brazilian
rawValue:
new AutoNumeric('#brazilian', 'Brazilian');Turkish
The format used by the Turkish
rawValue:
new AutoNumeric('#turkish', 'Turkish');Predefined common options
The common formats: integers, floats and numeric strings.
Decimal character as a dot, digit separator as a comma
The usual format for some languages
rawValue:
new AutoNumeric('#decimal-character-as-a-dot-digit-separator-as-a-comma', 'dotDecimalCharCommaSeparator');Decimal character as a comma, digit separator as a dot
The usual format for other languages
rawValue:
new AutoNumeric('#decimal-character-as-a-comma-digit-separator-as-a-dot', 'commaDecimalCharDotSeparator');rawValue:
new AutoNumeric('#integer', 'integer');rawValue:
new AutoNumeric('#positive-integer', 'integerPos');rawValue:
new AutoNumeric('#negative-integer', 'integerNeg');rawValue:
new AutoNumeric('#float', 'float');rawValue:
new AutoNumeric('#positive-float', 'floatPos');rawValue:
new AutoNumeric('#negative-float', 'floatNeg');Numeric
Format the value as a numeric string
The value has no digit group separator, and a dot for the decimal point.
rawValue:
new AutoNumeric('#numeric', 'numeric');Positive numeric
Format the value as a numeric string, and only allows for positive numeric values to be entered
Those numeric values can only be positive.
rawValue:
new AutoNumeric('#positive-numeric', 'numericPos');Negative numeric
Format the value as a numeric string, and only allows for negative numeric values to be entered
Those numeric values can only be negative.
rawValue:
new AutoNumeric('#negative-numeric', 'numericNeg');Predefined monetary options
Euro and dollar variants.
Euro
Format for the Euro currency
rawValue:
new AutoNumeric('#euro', 'euro');Positive Euro
Format for the Euro currency, that only allows positive values
rawValue:
new AutoNumeric('#positive-euro', 'euroPos');Negative Euro
Format for the Euro currency, that only allows negative values
rawValue:
new AutoNumeric('#negative-euro', 'euroNeg');Euro with a space as its digit separator
Format for the Euro currency with the alternative digit separator
Instead of using the dot '.' as the digit separator, this option uses the non-breakable space ' '.
rawValue:
new AutoNumeric('#euro-with-a-space-as-its-digit-separator', 'euroSpace');Positive Euro (with a space as its digit separator)
Format for the Euro currency, that only allows positive values
rawValue:
new AutoNumeric('#positive-euro-with-a-space-as-its-digit-separator', 'euroSpacePos');Negative Euro (with a space as its digit separator)
Format for the Euro currency, that only allows negative values
rawValue:
new AutoNumeric('#negative-euro-with-a-space-as-its-digit-separator', 'euroSpaceNeg');Dollar
Format for the Dollar currency
rawValue:
new AutoNumeric('#dollar', 'dollar');Positive Dollar
Format for the Dollar currency, that only allows positive values
rawValue:
new AutoNumeric('#positive-dollar', 'dollarPos');Negative Dollar
Format for the Dollar currency, that only allows negative values
rawValue:
new AutoNumeric('#negative-dollar', 'dollarNeg');Predefined percentage options
These options set rawValueDivisor, so that when you type 75%, the rawValue is automatically 0.75.
European percentage with 2 decimal places
Format the value as a percentage with 2 decimal places
Important note: When using those predefined options, the percentages are managed in a special way; when you enter 75,615 %, behind the scene the rawValue is automagically converted to 0.75615, thanks to the rawValueDivisor option.
Isn't awesome? ;)
rawValue:
new AutoNumeric('#european-percentage-with-2-decimal-places', 'percentageEU2dec');Positive European percentage with 2 decimal places
European percentage that only allows positive values
rawValue:
new AutoNumeric('#positive-european-percentage-with-2-decimal-places', 'percentageEU2decPos');Negative European percentage with 2 decimal places
European percentage that only allows negative values
rawValue:
new AutoNumeric('#negative-european-percentage-with-2-decimal-places', 'percentageEU2decNeg');European percentage with 3 decimal places
Format the value as a percentage with 3 decimal places
rawValue:
new AutoNumeric('#european-percentage-with-3-decimal-places', 'percentageEU3dec');Positive European percentage with 3 decimal places
European percentage that only allows positive values
rawValue:
new AutoNumeric('#positive-european-percentage-with-3-decimal-places', 'percentageEU3decPos');Negative European percentage with 3 decimal places
European percentage that only allows negative values
rawValue:
new AutoNumeric('#negative-european-percentage-with-3-decimal-places', 'percentageEU3decNeg');North American percentage with 2 decimal places
Format the value as a percentage with 2 decimal places
rawValue:
new AutoNumeric('#north-american-percentage-with-2-decimal-places', 'percentageUS2dec');Positive North American percentage with 2 decimal places
North American percentage that only allows positive values
rawValue:
new AutoNumeric('#positive-north-american-percentage-with-2-decimal-places', 'percentageUS2decPos');Negative North American percentage with 2 decimal places
North American percentage that only allows negative values
rawValue:
new AutoNumeric('#negative-north-american-percentage-with-2-decimal-places', 'percentageUS2decNeg');North American percentage with 3 decimal places
Format the value as a percentage with 3 decimal places
rawValue:
new AutoNumeric('#north-american-percentage-with-3-decimal-places', 'percentageUS3dec');Positive North American percentage with 3 decimal places
North American percentage that only allows positive values
rawValue:
new AutoNumeric('#positive-north-american-percentage-with-3-decimal-places', 'percentageUS3decPos');Negative North American percentage with 3 decimal places
North American percentage that only allows negative values
rawValue:
new AutoNumeric('#negative-north-american-percentage-with-3-decimal-places', 'percentageUS3decNeg');Predefined style rules
The styleRules option changes the CSS classes of the element whenever its value matches a value or a range you defined, using callbacks.
Display a different CSS class if the value is positive or negative
You can configure the CSS classes as you wish
Sets the autoNumeric-positive css class whenever the raw value is positive.
Sets the autoNumeric-negative css class whenever the raw value is negative.
rawValue:
new AutoNumeric('#display-a-different-css-class-if-the-value-is-positive-or-negative', {
styleRules: AutoNumeric.options.styleRules.positiveNegative,
});Display a different CSS class based on the rawValue, using ranges
You can configure ranges of values to correspond to a particular CSS class
Sets the autoNumeric-red css class whenever the raw value is between 0 and 25 excluded.
Sets the autoNumeric-orange css class whenever the raw value is between 25 and 50 excluded.
Sets the autoNumeric-yellow css class whenever the raw value is between 50 and 75 excluded.
Sets the autoNumeric-green css class whenever the raw value is between 75 and 100 excluded.
rawValue:
new AutoNumeric('#display-a-different-css-class-based-on-the-rawvalue-using-ranges', {
styleRules: AutoNumeric.options.styleRules.range0To100With4Steps,
});Display a different CSS class if the value is odd or even
You can configure the CSS classes as you wish
Sets the autoNumeric-odd css class whenever the raw value is odd.
Sets the autoNumeric-even css class whenever the raw value is even.
Do note that the code displayed does not show the callback function. To use this, use { styleRules: AutoNumeric.options.styleRules.evenOdd }.
rawValue:
new AutoNumeric('#display-a-different-css-class-if-the-value-is-odd-or-even', {
styleRules: AutoNumeric.options.styleRules.evenOdd,
});Display a different CSS class for value ranges
This modifiy the CSS classes based on the small ranges around zero, from -1 to 1
Sets the autoNumeric-small-negative css class whenever the raw value is between -1 and 0 excluded.
Sets the autoNumeric-zero css class whenever the raw value is equal to 0.
Sets the autoNumeric-small-positive css class whenever the raw value is between 0 excluded and 1.
Do note that the code displayed does not show the callback function. To use this, use { styleRules: AutoNumeric.options.styleRules.rangeSmallAndZero }.
rawValue:
new AutoNumeric('#display-a-different-css-class-for-value-ranges', {
styleRules: AutoNumeric.options.styleRules.rangeSmallAndZero,
});