AutoNumeric

AutoNumeric is a vanilla JavaScript library that turns a standard HTML input into a live, formatting-aware numeric field. As a user types, it applies digit grouping, decimal and currency symbols, sign handling, and rounding in real time, then exposes both the formatted display value and the underlying raw numeric value through a small, chainable API.

Beyond formatting, it ships a hand-built math expression parser so a field can accept simple arithmetic (e.g. “12.5*3+2”) and evaluate it into a final number on blur, alongside built-in undo/redo history, over 40 configuration options, and a large set of predefined locale/currency presets for common international formats.

What You Get

• A drop-in class that binds to one or more input elements and manages their formatted vs. raw numeric value automatically
• Over 40 configuration options covering currency symbol placement, digit grouping, decimal precision, min/max limits, and rounding methods
• A large set of predefined locale/currency option objects (euro, dollar, French, Swiss formats, etc.) that can be chained onto an instance
• Built-in undo/redo history and keyboard/paste handling tuned for live-formatted inputs
• A bundled math expression evaluator that lets a field accept and resolve simple arithmetic on blur
• TypeScript type declarations shipped alongside the plain-JS distribution for editor autocompletion

Common Use Cases

• Formatting a checkout or invoice amount field so users see live currency formatting (e.g. “$1,234.56”) while the server receives a clean raw number
• Building international billing forms that need locale-specific decimal/grouping characters (comma vs period) without custom keystroke handling
• Adding a quick-calculation input where a user can type “100*1.08” and have the tax-inclusive total resolve automatically
• Enforcing min/max numeric ranges (e.g. quantity or price fields) with immediate visual feedback as the user types

Under The Hood

Architecture The library centers on a single large AutoNumeric class (src/AutoNumeric.js) that owns the full lifecycle for a bound input: settings resolution, DOM event wiring (keydown/paste/focus/blur), formatting/unformatting, and an internal undo/redo history table. Supporting modules split out concerns that would otherwise bloat that class further: AutoNumericHelper (static string/DOM utilities), AutoNumericOptions and AutoNumericDefaultSettings (option validation and defaults), AutoNumericPredefinedOptions (locale/currency presets), and AutoNumericEvents (custom DOM event names). A distinct maths/ subsystem (Lexer, Parser, ASTNode, Evaluator, Token) implements a self-contained shunting-yard expression parser used to evaluate arithmetic typed into a field, kept cleanly separate from the formatting logic. The result is a monolithic core class with well-factored satellite modules rather than a layered or event-driven design.

Tech Stack AutoNumeric is dependency-free at runtime (dependencies: {} in package.json) and written in plain ES6+ JavaScript, transpiled with Babel and bundled via Webpack into both a full (dist/autoNumeric.js) and minified browser build. It ships a hand-authored TypeScript declaration file (index.d.ts) so TypeScript consumers get full typing despite the source being untyped JS. Linting runs through ESLint with the Babel parser, and continuous integration is configured via Travis CI, running the build, lint, and browser-based test suite on each push.

Code Quality The project has an extensive unit test suite driven by Karma and Jasmine against real browsers (Chrome/Firefox), plus an end-to-end suite built on WebdriverIO and Puppeteer, with coverage reported to Coveralls. Naming is consistent and every public method carries detailed JSDoc comments, including usage examples, which substitutes for the lack of native static typing in the source itself. Error handling favors explicit validation of user-supplied options over silent failures. The single very large core class is a code-smell by conventional standards, but is offset by comprehensive tests and long-standing CI coverage.

API Design The public API favors a chainable, jQuery-era ergonomic style: constructing an AutoNumeric instance and calling methods like .french() or .set() returns the instance itself, letting configuration and locale application be composed in one statement. Predefined option objects reduce the boilerplate of hand-configuring digit grouping and currency symbols for common locales, and the constructor accepts a CSS selector, DOM element, or an array of option/locale objects interchangeably, trading some type-safety for flexibility at the call site.