
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.
- Publication date: 24.05.2018
- Source