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

Category: Form , Javascript | January 22, 2024
Views Total:105 views
Official Page:Go to website
Last Update:January 22, 2024


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


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.

  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,


v0.1.9 (01/22/2024)

  • fix: undo & redo

You Might Be Interested In:

Leave a Reply