AutoNumeric.js documentation

What is AutoNumeric?

AutoNumeric is a standalone Javascript library that provides live as-you-type formatting for international numbers and currencies.

Feature Overview

Our mission is to provide a JS library to create and manage easy-to-use and logical user experience for inputing numeric values in forms.

AutoNumeric main features are:

Easy to use and configure

// Initialization
new AutoNumeric('.myInput', { currencySymbol : '$' });

Very high configurability

...with more than 40 options are available.

// The options are...optional :)
const autoNumericOptionsEuro = {
    digitGroupSeparator        : '.',
    decimalCharacter           : ',',
    decimalCharacterAlternative: '.',
    currencySymbol             : '\u202f€',
    currencySymbolPlacement    : AutoNumeric.options.currencySymbolPlacement.suffix,
    roundingMethod             : AutoNumeric.options.roundingMethod.halfUpSymmetric,
};

// Initialization
new AutoNumeric(domElement, autoNumericOptionsEuro);

User experience oriented

Using AutoNumeric just feels right and natural, specially with the function chaining feature

anElement.french()
         .set(42)
         .update({ options })
         .formSubmitJsonNumericString(callback)
         .clear();

Supports most international numeric formats and currencies

If the one you use is not supported yet, please open an issue and we'll add it as soon as possible!

Mobile support

The mobile Android Chrome browser is partially supported.

And also...

Any number of different formats can be used at the same time on the same page.
Each input can be configured by either setting the options as HTML5 data attributes, or directly passed as an argument in the Javascript code
The settings can easily be changed at any time using the update method or via a callback
AutoNumeric supports input elements as well as most text elements with the contenteditable attribute, allowing you to place formatted numbers and currencies on just about any part of your pages
AutoNumeric elements can be linked together allowing you to perform one action on multiple elements at once
8 pre-defined currency options as well as 33 pre-defined common options allows you to directly use AutoNumeric by skipping the option configuration step
26 built-in methods gives you the flexibility needed to use AutoNumeric to its full potential
22 global methods that allows to control sets of AutoNumeric-managed elements at once
21 additional methods specialized for managing form management and submission
A formula mode that allows to quickly enter and evaluate math expressions inside the element
17 static functions provided by the AutoNumeric class, which can be used in Web Workers
And more than 50 options allowing you to precisely customize your number and currency format and behavior

With that said, AutoNumeric supports most international numeric formats and currencies including those used in Europe, Asia, and North and South America.

Try AutoNumeric!

If you want to try AutoNumeric, please check the demo page.
There, you'll also have links to the additional AutoNumeric tools.

Which version should I use?

The latest stable branch is always on master. Currently this is version 4.6.*.

However, most of the development in done on the next branch, with master being updated sparsely.

If you want to try the new features, you can check out the latest development version in the next branch. That branch can see changes in the API (check the semver), however it's still very stable and bug-free (as far as we know) since it's always fully tested for regressions.

Tip

next is the preferred branch to use in production. Use master only if you do not need fixes quickly and are prepared to wait a few years between releases.

Older versions (v1.9 and v2)

If you are still using the old deprecated versions 1.9 and 2, you can follow our guide for easily upgrading from those versions to the current version 4.

What's next?

You can check what could be the next features coming to AutoNumeric on the projects page (feel free to participate!).