autoNumeric JavaScript

1. Introducing autoNumeric?

autoNumeric is a standalone Javascript library that provides direct formatting for international numbers and currencies.

Currently the latest stable version is version 4.2. * (Master branch), if you want to try new features you can see in the next branches.

1. Highlights

• Easy to use and easy to configure

• Highly configurable (more than 40 options available)

• Oriented user experience; Use autoNumeric moderately and naturally, especially with the string function feature

• Supports most international currency and number formats
• Partial support for Chrome browser for mobile devices

And also:

• All different formats can be used on the same page at the same time.
• Each input can be configured by setting options as an HTML5 data property or passing it directly as an argument in the Javascript code.
• The setting can be easily changed at any time using the update method or via callback
• autoNumeric supports input as well as most text elements with content changeable properties, allowing you to place formatted numbers and currencies on any part of your page.
• AutoNumeric elements can be chained allowing you to perform an action on multiple elements at the same time.
• 8 predefined currency options as well as 33 popular options that let you use AutoNumeric directly by skipping option configuration step
• The 26 built-in methods give you the flexibility you need to use AutoNumeric to its full potential
• 22 global methods allow to control sets of elements managed by Automatic Numbers at the same time
• 21 additional dedicated methods for managing form submission and management
• Formula mode allows to quickly enter and evaluate mathematical expressions inside an element
• 17 static functions are provided by the AutoNumeric class
• And over 40 options allow you to customize your currency’s format and behavior exactly

2. Installation

You can install AutoNumeric with your preferred dependency manager:

3. Usage

3.1 On the browser

Just include autoNumeric in the <header> tag of the html page. No need to depend on other files or libraries.

3.2 In another script

If you want to use AutoNumeric in your code, you can import the src / AutoNumeric.js file as an ES6 module using:

You can then initialize AutoNumeric with or without an option

3.3 In Web Workers

4. Is autoNumeric element based?

• with event handlers when used on <input> elements or on content-aiding elements that could make them reactive (in read / write mode) or
• There is no event handler when used on DOM elements that don’t have the contenteditable property set to true, which essentially acts as a one-time format read-only and forget mode.

5. In the <input> element

When used on the <input> element, you’ll be able to interact with its value and get the input formatted the way you type, using all autoNumeric ‘s functionality.

Please note that due to browser restrictions, only the following <input> types are supported:

• text ,
• tel ,
• hidden , or
• No categories are specified

Note: Number types are simply not supported because AutoNumeric formats numbers as strings (ie. ‘123.456.789.00 & # 8364;’) which this input does not allow.

5. Change content on elements applied

Any of the following Allowed List elements that support a content autoNumeric can be initialized using autoNumeric . This means that anywhere on a page, on any DOM element, you can harness the power of autoNumeric will allow you to mask user input.

Give the following html code …:

you can initialize the element

this is in autoNumeric:

… and it should behave exactly like an <input> element controlled by autoNumeric.

On other DOM elements

You can use AutoNumeric to format the DOM element value on load. This means it will not react to any user interaction.

The following factors are accepted:

This tip:

• Since the number type is not supported, if you want to display the numeric keypad when selecting an element managed with AutoNumber in the mobile browser, you can use the input phone number type.
• In the future, you will be able to add the Html property inputmode = “numeric” to achieve the same effect.

And the optional options I will write more in the next post.

Source: https://www.npmjs.com/package/autonumeric