Version 4
has seen a lots of improvements and new features, but also introduce breaking changes if you are trying to use it with an old v1.9
or v2
configuration.
Initialization of an AutoNumeric object has changed a bit.
Since AutoNumeric is now an ES6 module, AutoNumeric
being the name of the class
, and since the jQuery dependency has been dropped, you now longer need to first select the DOM element with jQuery, then call the $(yourElement).autoNumeric('init', { options })
method, but only need to instantiate an AutoNumeric
object using new AutoNumeric(yourElement, { options })
.
<= v2 (Before) |
v4 (After) |
---|---|
$('.myInput').autoNumeric('init', { options }); |
If you want to initialize only one element: new AutoNumeric('.myInput', { options }); |
If you want to initialize multiple elements: AutoNumeric.multiple('.myCssClass > input', { options }); |
The old option names have changed and are now deprecated, in favor of the new ones.
To help you switch to the new names, detailed warning messages are displayed in the console if an old option name is detected.
Do note that the option
mDec
(or its new namedecimalPlacesOverride
if you usedv2
) is no longer used.
If you want to specify the number of decimals, instead of relying on the maximum number of decimal places inminimumValue
ormaximumValue
like before, you can now setdecimalPlaces
to set it globally.
If you wish, you can also specify a different number of decimal places for the formatted value (withdecimalPlacesShownOnFocus
anddecimalPlacesShownOnFocus
) or therawValue
(withdecimalPlacesRawValue
).
<= v2 (Before) |
v4 (After) |
---|---|
aSep |
digitGroupSeparator |
nSep |
showOnlyNumbersOnFocus |
dGroup |
digitalGroupSpacing |
aDec |
decimalCharacter |
altDec |
decimalCharacterAlternative |
aSign |
currencySymbol |
pSign |
currencySymbolPlacement |
pNeg |
negativePositiveSignPlacement |
aSuffix |
suffixText |
oLimits |
overrideMinMaxLimits |
vMax |
maximumValue |
vMin |
minimumValue |
mDec |
decimalPlacesOverride (Deprecated) |
eDec |
decimalPlacesShownOnFocus |
scaleDecimal |
decimalPlacesShownOnBlur |
aStor |
saveValueToSessionStorage |
mRound |
roundingMethod |
aPad |
allowDecimalPadding |
nBracket |
negativeBracketsTypeOnBlur |
wEmpty |
emptyInputBehavior |
lZero |
leadingZero |
aForm |
formatOnPageLoad |
sNumber |
selectNumberOnly |
anDefault |
defaultValueOverride |
unSetOnSubmit |
unformatOnSubmit |
outputType |
outputFormat |
debug |
showWarnings |
If you want more detail about the AutoNumeric options, feel free to browse the AutoNumeric options source code which has detailed comment for each one.
A website is being constructed as we speak to make that more accessible.
Moreover, since we are now using an AutoNumeric
object, we can now directly call its methods (and chain them if needed).
In the following table, the anElement
variable is created using const anElement = new AutoNumeric(domElement, { options })
.
The methods are now called like so:
<= v2 (Before) |
v4 (After) |
---|---|
$(someSelector).autoFormat('1234.56', { options }); |
AutoNumeric.format(1234.56, { options }); |
$(someSelector).autoUnFormat('1.234,56 €', { options }); |
AutoNumeric.unformat('1.234,56 €', { options }); |
$(someSelector).autoValidate({ options }); |
AutoNumeric.validate({ options }) |
$.fn.autoNumeric.defaults |
AutoNumeric.getDefaultConfig() |
$(someSelector).autoNumeric("destroy"); |
anElement.remove(); |
$(someSelector).autoNumeric('get'); |
anElement.getNumericString(); |
$(someSelector).autoNumeric('getArray'); |
anElement.formArrayNumericString(); |
$(someSelector).autoNumeric('getFormatted'); |
anElement.getFormatted(); |
$(someSelector).autoNumeric('getLocalized'); |
anElement.getLocalized(); |
$(someSelector).autoNumeric('getNumber'); |
anElement.getNumber(); |
$(someSelector).autoNumeric('getString'); |
anElement.formNumericString(); |
$.fn.autoNumeric.lang |
AutoNumeric.getPredefinedOptions() |
$(someSelector).autoNumeric('reSet'); |
anElement.reformat(); |
$(someSelector).autoNumeric('set', '12345.67'); |
anElement.set(12345.67); |
$(someSelector).autoNumeric('unSet'); |
anElement.unformat(); |
$(someSelector).autoNumeric("update", { options }); |
anElement.update({ options }); |
$(someSelector).autoNumeric("wipe"); |
anElement.wipe(); |
Check the methods documentation to see how some of those functions signatures changed.
If you encounter any problem upgrading to v4
, feel free to contacts us on our Gitter channel or on IRC on Freenode #autoNumeric
!