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

Category: Form , Javascript | January 22, 2024
Author:abhinavxd
Views Total:70 views
Official Page:Go to website
Last Update:January 22, 2024
License:MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply