On which elements can it be used?
AutoNumeric can be used in two ways;
- with event listeners when used on
<input>elements or on
contenteditable-enabled elements making them reactive (in a read/write mode), or
- without event listeners when used on DOM elements not having the
contenteditableattribute set to
true, essentially acting as a format-once-and-forget read only mode.
When used on an
<input> element, you'll be able to interact with its value and get a formatted input value as-you-type, using the full power of AutoNumeric.
Please note than due to browser constraints, only the following supported
<input> types are supported:
- no type specified at all
<input type='text' value="1234.56"> <input type='tel' value="1234.56"> <input type='hidden' value="1234.56"> <input value="1234.56">
number type is not supported simply because AutoNumeric formats numbers as strings (ie.
'123.456.789,00 €') that this input type does not allow.
Any element in the following
allowedTagList1 that support the
contenteditable attribute can be initialized by AutoNumeric.
This means that anywhere on a page, on any DOM element, you can harness the power of AutoNumeric which will allow you to mask and manage the user inputs.
Given the following html code...
<p>element with AutoNumeric:
<input>element controlled by AutoNumeric.
On other DOM elements
You can use AutoNumeric to format a DOM element value once on load.
This means it will then not react to any user interaction nor changes to it's value or formatting.
The following elements are accepted:
Allowed tags list
number type is not supported, if you want to display a numeric keyboard when selecting an AutoNumeric-managed element in a mobile browser, you can use the input
In the future, you'll be able to add the
inputmode="numeric" Html attribute in order to achieve the same effect.
allowedTagListcontains the following HTML elements :