Easy Number and Currency Formatting Library - autoNumeric

autoNumeric is an useful JavaScript for international currency formatting as well as numbers formatting.

It supports almost all the major international numeric formats and currency signs used in Europe, North and South America, Asia and India.

You might also like:

How to use it:

1. Include the latest autoNumeric.js on the webpage

<script src="/path/to/autoNumeric.js" type=text/javascript> </script>

2. Create a input field with HTML5 data for the German Euro

<form>
  <input type="text" class="demo">
</form>

3. Initialize the autoNumeric library and done.

new AutoNumeric('.demo', { currencySymbol : '$' });

4. Options and defaults. You can also pass the following options via HTML5 data attributes.

// if the decimal places should be padded with zeroes
allowDecimalPadding: true,
// where should be positioned the caret on focus
caretPositionOnFocus              : true,
// Defines if a local list of AutoNumeric objects should be kept when initializing this object.
createLocalList                   : true,
// The currency symbol string
currencySymbol                    : true,
// Defines where the currency symbol should be placed (before of after the numbers)
currencySymbolPlacement           : true,
// what decimal separator character is used
decimalCharacter                  : true,
// Allow to declare an alternative decimal separator which is automatically replaced by `decimalCharacter` when typed
decimalCharacterAlternative       : true,
// the default number of decimal places to show on the formatted value, and keep for the precision
decimalPlaces                     : true,
// how many decimal places should be kept for the raw value rawValue
decimalPlacesRawValue             : true,
// how many decimal places should be visible when the element is unfocused
decimalPlacesShownOnBlur          : true,
// how many decimal places should be visible when the element has the focus
decimalPlacesShownOnFocus         : true,
// Helper option for Asp.net postback
defaultValueOverride              : true,
// how many numbers should be grouped together
digitalGroupSpacing               : true,
// the thousand grouping separator character
digitGroupSeparator               : true,
// the number that divides the element value on focus
divisorWhenUnfocused              : true,
// what should be displayed in the element if the raw value is an empty string ''
emptyInputBehavior                : true,
// if the custom and native events triggered by AutoNumeric should bubble up or not
eventBubbles                      : true,
// if the custom and native events triggered by AutoNumeric should be cancelable
eventIsCancelable                 : true,
// This option is AutoNumeric's "strict mode" (aka 'debug' mode), which allows autoNumeric to strictly analyse the options given by the user, and fails if an unknown options is used in the settings object
failOnUnknownOption               : true,
// if the default value will be formatted on initialization
formatOnPageLoad                  : true,
// Set the undo/redo history table size
historySize                       : true,
// Allow the user to cancel and undo the changes he made to the given autonumeric-managed element, by pressing the Escape key
isCancellable                     : true,
// Controls the leading zero behavior
leadingZero                       : true,
// the maximum/minimum possible value a user can enter
maximumValue                      : true,
minimumValue                      : true,
// allows the user to increment or decrement the element value with the mouse wheel
modifyValueOnWheel                : true,
// adds brackets-like characters on negative values when unfocused
negativeBracketsTypeOnBlur        : true,
// Placement of the negative/positive sign relative to the currencySymbol option
negativePositiveSignPlacement     : true,
// the negative sign symbol to use
negativeSignCharacter             : true,
// if the element should have event listeners activated on it
noEventListeners                  : true,
// Manage how autoNumeric react when the user tries to paste an invalid number
onInvalidPaste                    : true,
// Defines how the value should be formatted when wanting a localized version of it
outputFormat                      : true,
// Override the minimum and maximum limits
overrideMinMaxLimits              : true,
// the positive sign symbol to use
positiveSignCharacter             : true,
// Divides the formatted value shown in the AutoNumeric element and store the divided result in rawValue
rawValueDivisor                   : true,
// if the element (<input> or another allowed html tag) should be set as read only on initialization
readOnly                          : true,
// the rounding method to use
roundingMethod                    : true,
// Set to true to allow the decimalPlacesShownOnFocus value to be saved with sessionStorage
saveValueToSessionStorage         : true,
// Determine if the select all keyboard command will select the complete input text, or only the input numeric value
selectNumberOnly                  : true,
// if the element value should be selected on focus
selectOnFocus                     : true,
// how the serialize functions should treat the spaces
serializeSpaces                   : true,
// if the element value should be converted to the raw value on focus or mouseenter, (and back to the formatted on blur or mouseleave)
showOnlyNumbersOnFocus            : true,
// Allow the positive sign symbol positiveSignCharacter to be displayed for positive numbers
showPositiveSign                  : true,
// if warnings should be shown in the console
showWarnings                      : true,
// the rules that calculate the CSS class(es) to apply on the element, based on the raw unformatted value
styleRules                        : true,
// Add a text on the right hand side of the element value
suffixText                        : true,
// the symbol placed as a suffix when not in focus or hovered
symbolWhenUnfocused               : true,
// if the element value should be unformatted when the user hover his mouse over it while holding the Alt key
unformatOnHover                   : true,
// When a submit event is detected in the parent form element, temporarily removes the formatting and set the rawValue in each AutoNumeric child elements
unformatOnSubmit                  : true,
// Provides a way for automatically replacing the formatted value with a pre-defined string, when the raw value is equal to a specific value
valuesToStrings                   : true,
// if the AutoNumeric element should watch external changes made without using .set()
watchExternalChanges              : true,
// when the wheel event will increment or decrement the element value
wheelOn                           : true,
// Defines by how much the element value should be incremented/decremented on the wheel event
wheelStep                         : true,
// Additional information that are added to the `settings` object :
allowedAutoStrip                  : true,
isNegativeSignAllowed             : true,
isPositiveSignAllowed             : true,
mIntNeg                           : true,
mIntPos                           : true,
numRegAutoStrip                   : true,
originalDecimalPlaces             : true,
originalDecimalPlacesRawValue     : true,
stripReg                          : true,

Change Logs:

v4.x (2018-05-24)

• Allow non-input tags with the readOnly option to set the contenteditable attribute to false
• Fix the readonly and contenteditable attributes so that they can be updated to read/write mode
• Modify _setReadOnly() so that it always sets the element to read-only mode
• Create a new _setReadWrite() function that sets the element to read-write mode
• Create a new _setWritePermissions() function that sets the element read only/write mode according to the readOnly setting
• CURRENTLY WORKS AS A PURE JAVASCRIPT LIBRARY.

This awesome jQuery plugin is developed by autoNumeric. For more Advanced Usages, please check the demo page or visit the official website.