Real-Time Number/Currency Formatting With liveNumberFormat.js Library

Preview:

Description:

iveNumberFormat.js is a lightweight JavaScript library that allows for real-time formatting of numbers and currencies as users type rather than after the fact.

This creates a smoother user experience, avoiding the jarring transition that occurs when a raw number changes format after focus is lost.

How to use it:

1. Download and import the ‘LiveNumberFormat’.

import LiveNumberFormat from "./livenumberformat.min.js";

2. Initialize the LiveNumberFormat on your number input and the library will take care of the rest.

<input
  id="numberInput"
  placeholder="Enter a number"
/>

new LiveNumberFormat(document.querySelector("input"), {
  // options here
});

3. Developers can customize the thousands separator, decimal separator, decimal precision, and more. Options like stripLeadingZeroes and allowNegative give further control over the input format.

new LiveNumberFormat(document.querySelector("input"), {
    debounceTime: 300,
    allowNegative: true,
    decimalMark: '.',
    delimiter: ',',
    // thousandLakhCrore
    // thousand
    // tenThousand
    formatStyle: 'thousand',
    decimalScale: Infinity,
    integerScale: Infinity,
    stripLeadingZeroes: false,
    allowDecimalReplacement: false,
    maxUndoStackSize: 500,
});

Changelog:

v0.1.9 (01/22/2024)

• fix: undo & redo