autoNumeric 1.9.41 is a jQuery plugin that automatically formats currency and numbers as you type on form inputs. It supports most International numeric formats and currency signs including those used in Europe, North and South America, Asia and India lakhs.

Any number of currency formats can reside on the same page and are configured by options that can be placed as HTML5 data attribute or passed as an argument. These settings can easily be changed at any time using the new ‘update’ method or via the callback feature. autoNumeric now supports 'b', 'caption', 'cite', 'code', 'dd', 'del', 'div', 'dfn', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ins', 'kdb', 'label', 'li', 'output', 'p', 'q', 's', 'sample', 'span', 'strong', 'td', 'th', 'u', 'var' elements, allowing you to place formatted numbers and currency on just about any part your page.

Seven built in methods gives you the flexibility needed to use autoNumeric to its maximum potential. You can now easily start and stop autoNumeric, update the settings and remove the formatting from multiple inputs, preparing the values for manipulation or form submission.

There are fifteen options which controls the behavior and format of the form input field. These options are easy to implement with the data/argument code generator located below.

If you are developing sites that span across International lines that use different currency symbols and formats you will find autoNumeric the ideal tool to shorten your development time.

PayPal

Donations allow me to keep
hosting & updating autoNumeric()

Authors & contact:

Download:

Demonstration of autoNumeric()'s flexibility

The following three inputs show various formatts and currency signs.
Euro- Germany
Franc - Swiss
India's Lakh number format
These three show min/max levels, per-cent sign brackets on negitive value.
Min/Max values (-9999999 to 0)
Percentage sign
Brackets when negative & no focus
The example below demonstrates the 'get' and 'set' methods. Type in the first input field and the other two fields will be updated on the "blur", "focusout", "keypress" and "keyup" events.
Enter here:
$(selector).autoNumeric('get');
$(selector).autoNumeric('set', value);
autoNumeric now supports many non-input elements allowing you to place formatted strings where jQuery's ".text()" method is supported. This can be done on page ready or placed at anytime via the "set" method.
<p> & <span> tags

1234567.89
<label> tags

 
<th> & <td> table tags
1234.56
     

Key features of autoNumeric()

Guide on how the balance of this page is organized:

Deploying autoNumeric can be accomplished in just a few steps. The methods listed below gives you the ability to start, stop and update options of autoNumeric as well as format or remove the formatting from input fields for use in other scripts and or form submissions. Click on the links for details and demos on each method.

Method(s) Description Format
'init' initializes autoNumeric $(selector).autoNumeric('init', {options});
'destroy' disables autoNumeric for the selected element $(selector).autoNumeric('destroy');
'update' updates options - can be called multiple times $(selector).autoNumeric('update', {options});
'set' returns a formatted string via ".val()" or ".text' $(selector).autoNumeric('set', value);
'get' returns un-formatted object via ".val()" or ".text()" $(selector).autoNumeric('get');
'getString' returns a string 'URL encoded' from the selected form $(selector).autoNumeric('getString');
'getArray' returns a array of objects from the selected form $(selector).autoNumeric('getArray');
'getSettings' returns settings for the selected element $(selector).autoNumeric('getSettings');

Configuring autoNumeric settings: The are a total of 15 settings/options that control the format and the behavior of the input field. For your convenience I have created a HTML5 data and option code generator - all you need to do is select the desired option and the code will be shown at the bottom for you to copy and paste into the appropriate document.

Settings - name and value Discription

aSep - controls the thousand separator (note - the thousand & decimal separators can not be the same)

aSep: ',' comma (default)
aSep: '\'' apostrophe (note: the apostrophe is escaped)
aSep: '.' period
aSep: ' ' space
aSep: '' none

dGroup - controls the digital grouping - the placement of the thousand separator

dGroup: '3'  produces 333,333,333 (default)
dGroup: '2'  produces 22,22,22,333
dGroup: '4'  produces 4,4444,4444 used in some Asian country's

aDec - controls the decimal (note - the thousand & decimal separators can not be the same)

aDec: '.' period (default)
aDec: ',' comma

altDec - This was developed to accommodate different keyboard layouts. altDec allows you to declare an alternative key to enter the decimal separator assigned in aDec. Word of caution - use with discretion because it has the potential of being very confusing to your users.

Please note that the full stop on the numeric pad will enter the decimal separator even when the comma is assigned as the decimal separator (aDec: ',').

altDec: null    (default)
 limited to one non-numeric character. Do not add quote marks.

aSign - desired currency symbol (examples: € or EUR). Note: other symbols can be used, such as %, °C, °F, km/h & MPH the possibilities are endless.

  • Note: the currency symbol cannot contain an apostrophe, comma or numeric character.
  • Note: Some currency symbols that are not supported by common fonts (Arial & Tahoma) - I have put together a table you may find useful (Click here to view) of the symbols that are supported by the aforementioned fonts.
  • Note: Spacing between the currency symbol and numeric characters are set using the aSign option. Example no spacing '$' and with spacing '$ ' or ' $' depending on the location (prefix or suffix) of the symbol.
aSign: '' none (default)
enter the desired symbol. Do not add quote marks, they are automatically added.

pSign - controls the placement of the currency symbol.

pSign: 'p' prefix to the left (default)
pSign: 's' suffix to the right

Notes on the minimum (vMin) / maximum (vMax) values:

  • The maximum value should always be greater than the minimum value - sorry I had to list this rule!
  • If the minimum / maximum values are both positive or negative you MUST have a default value assigned to the field that is greater than or equal to the minimum value and less than or equal to the maximum value.
  • IMPORTANT - please understand that vMin & vMax settings are limits. Meaning the user cannot enter a value greater than the vMax value and cannot enter or delete a value below the vMin setting. When setting the vMin & vMax values to both positive or negative you could create a paradoxical situation which limits the user ability to enter values. Consider the following:
    • vMin:'5' & vMax:'10' - you can never enter the number 10.
    • vMin:'10' & vMax:'100' and no default value - you can never enter any value.
    • vMin:'0.01' & vMax:'9.99' and no default value - you can not start to enter number less than 1.
    • vMin:'0.00' & vMax:'-9.99' and no default value - you can not enter any value.
    • To avoid many of these scenarios I recommend that you set vMin or vMax to "0" and validate later.
  • The number of decimal places is determined from the minimum / maximum values - whichever has value has the greater number of decimal places.
  • The values can contain only numeric characters and one decimal (full stop) character. This metadata code generator automatically places quote marks on the value. If you manually write the metadata code these quote marks are required.
  • The limits of the code generator are 10 significant digits and 5 decimal places - if your requirements exceed these limits you will need to manually adjust the values.

vMin - Enter the minimum value allowed. Values can be whole numbers, floating point, positive, zero or negative.

vMin: '0.00' (default)
select the option then enter the desired value to the left.

vMax - Enter the maximum value allowed. Values can be whole numbers, floating point, positive, zero or negative.

vMax: '999999999.99' (default)
select the option then enter the desired value to the left.

mDec - Only needed if you want to override the number of decimal places that are set by the vMin & vMax values.

mDec: null decimal places set via vMin & vMax values (default method)
enter the number of decimal places - this will over ides values set by vMin & vMax

mRound - controls the rounding method. To test the various rounding methods please see below. For in depth details on rounding methods visit the DIY Calculator site.

mRound: 'S' Round-Half-Up Symmetric (default)
mRound: 'A' Round-Half-Up Asymmetric
mRound: 's' Round-Half-Down Symmetric (lower case s)
mRound: 'a' Round-Half-Down Asymmetric (lower case a)
mRound: 'B' Round-Half-Even "Bankers Rounding"
mRound: 'U' Round Up "Round-Away-From-Zero"
mRound: 'D' Round Down "Round-Toward-Zero" - same as truncate
mRound: 'C' Round to Ceiling "Toward Positive Infinity"
mRound: 'F' Round to Floor "Toward Negative Infinity"
mRound: 'CHF' Rounding for Swiss currency to the nearest ".00 or .05"

aPad - controls padding of the decimal places.

aPad: true always pads the decimal with zeros (default)
aPad: false no padding - rounding occurs when the decimal length exceeds the decimal places

nBracket - Controls if negative values are display with brackets when the input does NOT have focus.

nBracket:null no brackets used for negative values (default)
nBracket: '(,)' Parentheses - visable only on 'focusout'
nBracket: '[,]' Brackets - visable only on 'focusout'
nBracket: '{,}' Braces - visable only on 'focusout'
nBracket: '<,>' Angle brackets - visable only on 'focusout'

wEmpty - controls input display behavior.

wEmpty: 'empty' allows input to be empty (no value) (default)
wEmpty: 'zero' input field will have at least a zero value
wEmpty: 'sign' the currency symbol is always present

lZero - Controls if leading zeros are allowed

lZero: 'allow' allows leading zero to be entered. They are removed on focusout event (default)
lZero: 'deny' leading zeros not allowed.
lZero: 'keep' leading zeros allowed and will be retained on the focusout event

aForm- Controls if default values are formatted on page ready (load)

aForm: true default values are formatted on page ready (default)
aForm: false default values are NOT formatted on page ready

anDefault - Used on ASP.NET pages with form post-back.

vMax: null (default)
select the option then enter the desired value to the left.

The options and data codes will appear in Red - copy and paste as needed.

 

 




back

The basics on getting autoNumeric() up and running with the initialize 'init' method and default settings:

First - include jQuery.js and autoNumeric-(with latest version).js javascript files in the header.

      
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
  <script src="autoNumeric-(with latest version).js" type=text/javascript> </script>
  

Second - insert a form and input field on the HTML document.

  • The input type accepted:
    • None
    • Text
    • Hidden
    • tel
  • Other input types including "number" NOT supported by autoNumeric.
      
  <!-- input field with HTML 5 data -->
  <!-- "data-an-default" is required to support asp.NET webForms postback - new as of version 1.9.37 -->
  <!-- the value of "data-an-default" should be the same as the value attribute -->
  <form>
  <input type="text" name="someName" id="someID" value="1234.56" data-an-default="1234.56" >
  </form>
  

Third - in a separate script initialize autoNumeric $('selector').autoNumeric('init').

  • Selector - is any valid jQuery selector
      
  // this example uses the id selector & no options passed    
  jQuery(function($) {
      $('#someID_defaults').autoNumeric('init');    
  });
  

Finished - an input field with autoNumeric default settings. Now add CSS styling if desired and test the results.


back

Changing default settings - there are multiple ways of changing the defaults. The order of precedence or loading sequence where the preceeding "setting" value is overriden buy the new value is as follows:

  • Defaults
  • jQuery $.extend medthod to override the defaults (as of version 1.9.27)
  • HTML5 data attributes (as of version 1.8.0)
  • Options passed when initialing autoNumeric (as of version 1.7.0)

Also see the "update method" and "callback function" features for addition ways of changing the default settings

      
  <!-- input field with no HTML 5 data options -->
  <form>
  <input type="text" id="someID" class="someClass">
  </form>
  

$.extend mothod - examples - please note that this is a gobal change for the page but can be overriden

Basic setting assignment


<script type="text/javascript" src="js/jquery.autoNumeric.js" />  
<script type="text/javascript">      
	
	$(document).ready(function () {          
		$.extend($.fn.autoNumeric.defaults, {              
			aSep: '.',              
			aDec: ','          
		});      
	});  

  	jQuery(function($) {
      	$('#selector').autoNumeric('init');    
  	});

</script>

Passing ASP.net current culture settings


<script type="text/javascript" src="js/jquery.autoNumeric.js" />  
<script type="text/javascript">  
    
$(document).ready(function () {          
  $.extend($.fn.autoNumeric.defaults, {              
   aSep: '@System.Threading.Thread.CurrentThread.CurrentCulture.NumberFormat.NumberGroupSeparator',              
   aDec: '@System.Threading.Thread.CurrentThread.CurrentCulture.NumberFormat.NumberDecimalSeparator'          
  });      
});

 jQuery(function($) {
  $('#selector').autoNumeric('init');    
 });
  
</script>

HTML 5 data attibute(s)

  • HTML5 data example: <input type="text" id="someID" data-a-dec="," data-a-sep=".">. Please note:
    • HTML 5 data overrides defaults and defaults set vis the $.extend method.
    • No order of the data attributes is required
    • The data attribute is written in lowercase. Compound words (example: "aDec") need to be split and separated by a dash. The equal sign separates the name and value. The value should be enclosed with quote marks. If multiple options are being used they each need to have the own data attribute. Do not use capital characters - jQuery will automatically convert it the proper camelCase notation:
      • data-a-dec="," will be converted to aDec:',' that autoNumeric uses.
    • Not to worry - I have created a option/HTML5 code generator above that you just copy and paste.

Options passed via the "init"or "update" methods

  • Options example: $('selector').autoNumeric('init', {aSep: '.', aDec: ','}); - options are written in "camelCase notation" which is identically to that of the settings defaults. A colon is used to separate the name of the option and the value which should be enclosed with quotes. If multiple options are being sent they should be separated by a comma. All options need to be enclosed braces (curly brackets). Please note the following:
    • Options passed by the "init" & "update" methods overrides defaults, defaults set vis the $.extend methods and HTML5 data.
    • Not to worry - I have created a option/HTML5 code generator above that you just copy and paste.

Examples:

First - include jQuery.js and autoNumeric-(latest version).js javascript files in the header.

      
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
  <script src="autoNumeric-(latest version).js" type=text/javascript> </script>
    

Second - insert a form and input field on the HTML page with the desired HTML5 data.

      
  <!-- input field with  HTML 5 data for the German Euro -->
  <form>
  <input type="text" id="someID_HTML5" data-a-sign="€ " data-a-dec="," data-a-sep=".">
  </form>
    

Third - in a separate script initialize autoNumeric $('selector').autoNumeric('init');

      
  // this example uses the id selector & no options passed    
  jQuery(function($) {
      $('#someID_HTML5').autoNumeric('init');    
  });
    

Completed - an input field with HTML5 data being passed to autoNumeric.


This example uses both HTML5 data and options.

First - repeat step 1 in the previous examples.

Second - repeat step 2 and insert a form and input field on the HTML page with the same HTML5 data.

Third - initialize autoNumeric with options being passed. Please note that setting "aSign" was passed

      
  // this shows options being passed - details on allowed options are below
  jQuery(function($) {
      $('#someID_options').autoNumeric('init', {aSign:' EUR', pSign:'s' }); 
  });
      

Completed - this demonstrates the options overrides both defaults and HTML5 data.




back

Callback function - allows the returned value to be taken as parameter to the default/options settings. You can pass the function via options or HTML5 data and can be used on any of the 15 options.

The following shows the the function being passed via options with the mDec setting.

		
 <script type="text/javascript">
 
 /* the callback function must be defined prior to initiating autoNumeric */ 
 
 var functionName = function(){
    /* your code here */  
    var value = 4; /* example only */
    return value; 
 }

 /* initiates autoNumeric and passes a function */	
																				
 $('selector').autoNumeric('init', {mDec: functionName})  
 
 </script> 
																				
    

This shows the the function name being passed via HTML5 data with the mDec setting.

		
 <script type="text/javascript">
 
 /* the callback function must be defined prior to initiating autoNumeric */ 
 /* please note that the function is namespaced and defined prior to autoNumeric being initiated */ 
 
 $.fn.autoNumeric.functionName = function(){
    /* your code here */  
    var value = 4; /* example only */
    return value; 
 }

 /* initiates autoNumeric and passes a function from the HTML5 data atribute */	
																				
 $('selector').autoNumeric('init')  
 
 </script> 


 <input type="text" data-m-dec="functionName"/>																				
    

back

'init' method - initializes autoNumeric and must be run before other methods can be called.

The following are valid ways to configure the 'init' method.

  • $(selector).autoNumeric('init'); "initialized with defaults only"
  • $(selector).autoNumeric(); "initialized with defaults only"
  • $(selector).autoNumeric('init', {options}); "initialized with options"
  • $(selector).autoNumeric({options}); "initialized with options"
  • $(selector).autoNumeric('init', someOptions); "options placesd as variable var someOptions = {options};"
  • $(selector).autoNumeric(someOptions);

Note the following

  • Using 'init' is optional on the initialize method all other methods require being declared.
  • 'init' is case sensitive.
  • The input type attribute must equal text "<input type="text">" or have not type attribute. Other input types are NOT supported including HTML 5 number type.
  • Non-input tags supported ('DD', 'DT', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'INPUT', 'LABEL', 'P', 'SPAN', 'TD', 'TH').
  • The input element is the only tag that supports auto formatting as you type.
  • Any valid selector is supported.

Changing settings (Defaults) with HTML5 data and / or options

To override defaults you can use either HTML5 data attribute and/or options sent as an argument. The below example shows the settings order of precedence - default value for aSign = '', data-a-sign = "$ " and options = '€ ', where defaults are overridden by the HTML5 data and options overrides both the defaults and HTML5 data.

To use the HTML data attribute find the default you want to override and place in the input tag using the standard data format. An example for changing the currency sign from the default (aSign:'') to the dollar sign (data-a-sign="$ "). To change multiple defaults you will need to use multiple data attributes "<input type="text" data-v-min="-999999999.99" data-n-bracket="()">".

HTML data is set as follows: <input type="text" class="auto" id="ai1" data-a-sign="$ ">.

Options are sent as an argument in the following ways:

  • $(selector).autoNumeric('init', {aSep: '.', aDec: ',', aSign: '€ '});
  • As a variable:
    • var someOptions = {aSep: '.', aDec: ',', aSign: '€ '};
    • Then $(selector).autoNumeric('init', someOptions);
  • You can also create an object and then use jQuery.parseJSON as in the following example
    • var getDecimal = 3;
    • var getOption = $.parseJSON('{"mDec": "' + getDecimal + '"}');
    • Then $(selector).autoNumeric('init', getOptions);

Default values

By default autoNumeric formats the default values on page ready. The values should be sent as text. To accommodate locale formats autoNumeric will treat the first period "." or comma "," as the decimal point. So the following rules apply:

value / text valid?
"123456" true
"-123456" true
"123456.78" true
"-123456.78" true
"123456,78" true
"-123456,78" true
"123,456.78" false
"123.456.78" false
"€ 123456.78" false

All values being "set" need to fall with the min/max rules.

The option "aForm" controls how default values are handled on page ready. When "aForm: true" is true the defaults values of the the supported elements that are controlled by autoNumeric are formatted on page ready. When "aForm: false" is false the values are not formatted on page ready, but input fields will be formatted when they have focus on the first keypress event is fired.

So when aForm is set to true "aForm: true" the defaults value should be un-formulated as follows:
<input type="text" value="99999.99"> or <span>9999.99</span>. Have a single decimal point and numeric characters only.

When aForm is set to false "aForm: False" the defaults values should be pre-formatted as follows:
<input type="text" value="€ 99.999,99">.

Demo

  1. This example is initialized on page ready and is loaded with HTML5 data and options.
    • $('#demoInit').autoNumeric('init', {aSign: "€ "});
    • <input type="text" id="demoInit" data-a-sign="$ ">
  2. Enter any value and see

Note - look at the next demo to experiment with the "init" and "destroy" methods

  • Notice that options supercede defaults & HTML5 data
  • If the field contains only alpha characters at the time the field is initalized the result will be an empty string
  • If the field contains alpha and numeric characters, autoNumeric will strip any character that is not allowed
  • If the field value falls outside the min/max range and error will be thrown to the javascript console
  • If the field contains multiple decimal points only the first is reconized

Warning

CautionCalling the "init" method on a element where the decimal point "aDec" and the thousand separator "aSep" are equal will cause an error message to be thrown to the javascript console.

CautionCalling the 'init' methods on a element that is not supported by autoNumeric will cause an error message to be thrown to the javascript console.

back

'destroy' method - removes autoNumeric from the selected element(s).

Proper format for the 'destroy' method.

  • $(selector).autoNumeric('destroy'); 

Note the following

  • The method name 'destroy' is required "$(selector).autoNumeric('destroy');".
  • 'destroy' is case sensitive.
  • Options and arguments are NOT accepted.
  • Existing values are NOT modified or deleted. If you need to remove the formatting you should do so prior to calling the destroy method via the 'get' method described later.
  • The selected fields or elements can be re-initialized at any time.

Demo

  1. Enter a value including try entering alpha characters.
  2. After a value has been entered press the 'destroy' button - notice the value is unchanged.
  3. Next try entering alpha characters.
  4. After you have entered alpha characters press the 'init' button.
  5. Please try multiple combinations so you understand the behavior of the 'destroy' and 'init' methods.
<input type="text" id="demoDestroyInput">

on click = $('#demoDestroyInput').autoNumeric('destroy');

on click = $('#demoDestroyInput').autoNumeric('init');

Note on existing values

  • If the field contains only alpha characters at the time the field is initalized the result will be an empty string
  • If the field contains alpha and numeric characters, autoNumeric will strip any character that is not allowed
  • If the field value falls outside the min/max range and error will be thrown to the javascript console
  • If the field contains multiple decimal points only the first is reconized
back

"update' method - easily update element(s) that have been previously initialized 'init' by autoNumeric.

Proper format for the 'update' method.

  • $(selector).autoNumeric('update', {options}); 

Please note the following

  • The 'update' method name is required "$(selector).autoNumeric('update', {options});".
  • 'update' is case sensitive.
  • Options are required and are accepted as an argument or variable (see the 'init' method description).
  • The 'update' method will function on all elements supported by autoNumeric.
  • The 'update' method can be called repeatably with one or more options at a time.
  • Existing values will be stripped, preserved and reformatted to the new settings.
  • Values that fall outside the range of the new min/max range will be returned as "0.00" (depending on the number of decimal places and the decimal separator character in the settings).

Demo

  1. The demo sample below is 'init' with defaults on page ready.
  2. Enter a value and then press either of the buttons to change the "aSign" option.
  3. Please press either button multiple times.

$('#demoUpdateInput').autoNumeric('init');

on click = $('#demoUpdateInput').autoNumeric('update', {aSign: '$ '});

on click = $('#demoUpdateInput').autoNumeric('update', {aSign: '€ '});

Note

  • The value is unchanged unless the min/max, rounding and or the max decimal places are modified and the value fall outside the new range.

Warning

CautionCalling the 'update' method prior to the 'init' method will cause a error message to be thrown to the Javascript console.

CautionCalling the "update" method on a element where the decimal point "aDec" and the thousand separator "aSep" are equal will cause an error message to be thrown to the javascript console.

CautionCalling the 'update' method on a element that is not supported by autoNumeric will cause an error message to be thrown to the javascript console.

back

'set' method - The 'set' method allows you to easily format number and numeric strings

Proper format for the 'set' method.

  • $(selector).autoNumeric('set', value); 

Please note the following

  • The 'set' method name is required "$(selector).autoNumeric('set', value);".
  • 'set' is case sensitive.
  • Options are NOT accepted.
  • The 'set' method can be used on any element that are supported by autoNumeric.
  • The value can be sent as a string or variable
    • $(selector).autoNumeric('set', '1234.56');
    • var someValue = 1234.56 then $(selector).autoNumeric('set', someValue);
  • Returns a string

Demo

1. Enter a value between -999999999.99999 and 999999999.99999
2. on click = $('.demoSet').autoNumeric('set', someValue)
3. <input type="text" class="demoSet" data-a-sign="$ " readonly>
4. Number placed here: <span class="demoSet" id="p1" data-a-sign="¥ " ></span>

Note:

  • Values that fall outside the min/max range will not be 'set' and a error message will be thrown to the javascript console.

Warning

CautionCalling the 'set' method prior to the 'init' method will cause a error message to be thrown to the Javascript console.

CautionCalling the 'set' method on a element that is not supported by autoNumeric will cause an error message to be thrown to the javascript console.

back

'get' method - The 'get' method allows you to easily remove the formating from a string on a autoNumeric controlled element and returns a string.

Proper format for the 'get' method.

  • $(selector).autoNumeric('get'); 

Please note the following

  • The 'get' method name is required "$(selector).autoNumeric('get');".
  • 'get' is case sensitive.
  • Options and values are NOT accepted.
  • Works on any element supported by autoNumeric.
  • Returns only the first element of the selector.
  • Returns a string.

Demo

1. Enter a value from 0 to 999999999.99
2. on click = $('#demoGetInput').autoNumeric('get')
3. the returned number from the above input is placed here
4. 1234567.89 the 'get' method works on al supported elements. This example uses the <td> tag
5. on click = $('#demoGetTd').autoNumeric('get')
6. the returned number from the table cell <td> tag is placed here

Note:

  • If the autoNumeric controlled element does not contain a numeric character an empty sting will be returned.

Warning

CautionCalling the 'get' method prior to the 'init' method will cause a error message to be thrown to the Javascript console.

CautionCalling the 'get' method on a element that is not supported by autoNumeric will cause an error message to be thrown to the javascript console.

back

'getString' method - this basically uses jQuery's .serialize() method which creates a text string (URL-encoded notation) from a set of form elements that is ready for submission. The extra step taken here is the string is split and iterated through and the formatted values are replaced with unformatted values. The string is then joined back together and returned.

Proper format for the 'getString' method.

  • $(selector).autoNumeric('getString'); 

Please note the following

  • The 'getString' method name is required "$(selector).autoNumeric('getString');".
  • Options and value are NOT accepted.
  • The "getString" method does NOT validate the form inputs. It will return what has been entered including empty strings.
  • If your selector includes non-autoNumeric fields they will be returned untouched.
  • Only "successful controls" are serialized to the string. Please read more about jQuery's .serialize() method to see if "getString" method will work for your application.
  • Returns a string

Demo

  1. To view the method results open your browser's console (you may need to reload the page).
  2. Press the "getString" button. Two strings should be appear.
  3. The first string was created to show jQuery's .serialize() method with no modifications.
  4. The second string is from the "getString" method.
First name:
Last name:
2012 sales:
2011 sales:
2010 sales:
 

Note

  • If the autoNumeric controlled element does not contain a numeric character an empty sting will be returned.

Warning

CautionAt least one input must be controled by autoNumeric. If not the 'getSting' method will cause a error message to be thrown the the Javascript console.

back

'getArray' method - this basically uses jQuery's .serializeArray() method which returns a Javascript array of objects, ready to be encoded as a JSON string. The extra step taken here is the the object array is iterated through and formatted values are replaced with un-formatted values and returned.

Proper format for the 'getArray' method.

  • $(selector).autoNumeric('getArray'); 

Please note the following

  • The 'getArray' method name is required "$(selector).autoNumeric('getArray');".
  • Options are NOT accepted.
  • An object is returned. If you want this converted to a valid JSON string to submit to the server you should consider JSON2.js as I did in this demo.
  • The "getArray" method does NOT validate the form inputs. It will return what has been entered including empty strings.
  • If your selector includes non-autoNumeric fields they will be returned untouched.
  • Only "successful controls" are serialized to the string. Please read more about jQuery's .serializeArray() method to see if "getArray" method will work for your application.

Demo

  1. To view the "getArray" method open your browser's console (you may need to reload the page). Fill in the inputs above and then press the "getArray" button. The following lines should be appear so you can see the differences.
  2. The first string was created to show jQuery's .serializeArray() method with no modifications.
  3. The second object is from the "getArray" method
  4. The third line takes the return object from the "getArray" method and converts to a valid JSON string via JSON.stringify.
Order notes:
 

Note

  • If the autoNumeric controlled element does not contain a numeric character an empty sting will be returned.
  • jQuery does not have a native stringify method.

Warning

CautionAt least one input must be controled by autoNumeric. If not the 'getArray' method will cause a error message to be thrown the the Javascript console.

back

'getSettings' method - this returns an object that shows the autoNumeric settings for the field. You may find this helpful when developing a page.

Proper format for the 'getArray' method.

  • $(selector).autoNumeric('getSettings'); 

Please note the following

  • Only the first element from the selector will be returned.
  • If the selector points to a non-autoNumeric field or tag "undefined" is returned.

Demo instructions

  • To view this in action open your browser's console (you may need to reload the page) and press the "getSettings" button. In this example I have pointed id="fi7" (the negative bracket example).

Warning

CautionCalling the 'getSettings' method prior to the 'init' will cause a error message to be thrown the the Javascript console.

back


The following demonstrates the supported rounding types

  1. Enter a value between -99999.99999 and 99999.99999
  2. Select the decimal accuracy between 0 and 5
  3. Press the "round" button and see the results to the right
  4. Re-select the decimal and change the value
  5. Re-set the form and try new values
Entered value to be rounded Description Rounded results
 Round-Half-Up
"Symmetric"


 Round-Half-Up
"Asymmetric"

 

 Round-Half-Down
"Symmetric"

 Round-Half-Down
"Asymmetric"

 Round-Half-Even
"Bankers"

 Round Up
"Away From Zero"

 Round-Down
"Toward Zero"

Round to Ceiling
"Toward Positive Infinity"

Round to Floor
"Toward Negative Infinity"

Rounding for Swiss currency
"To the nearest .00 or .05"





back

The following demonstrates negative values with brackets - the next field is loaded with lZero: 'allow'. Update the field options and test the behavior change. Brackets are visible only when the field does not have focus.

<input type="text" id="fi7" name="fi7" value="-9999.99" data-v-min="-999999999.99" data-n-bracket="(,)">

back

The following demonstrates the leading zero modification - the next field is loaded with lZero: 'allow'. Update the field options and test the behavior change.

lZero: "deny" - allows only one leading zero (same behavior as versions 1.7.0 to 1.7.4.

lZero: "allow" - allows leading zeros to be entered. Removes leading zeros on the focusout event.

lZero: "keep" - allows leading zeros to be entered. Keeps leading zeros on the focusout event.

$('#i6').autoNumeric('init');

$('#i6').autoNumeric('update', {lZero: 'deny'});

$('#i6').autoNumeric('update', {lZero: 'allow'});

$('#i6').autoNumeric('update', {lZero: 'keep'});

<input type="text" id="i6"> note: default currently set to allow


Browsers supported - limited testing conducted on the following:

Known issues

Change / history log:

Version 1.9.41

Version 1.9.40

Version 1.9.39

Version 1.9.38

Version 1.9.37

Version 1.9.36

Version 1.9.35

Version 1.9.34

Version 1.9.33

Version 1.9.32

Version 1.9.31

Version 1.9.30

Version 1.9.29

Version 1.9.28

Version 1.9.27

Version 1.9.26

Version 1.9.25

Version 1.9.24

Version 1.9.23

Version 1.9.22

Version 1.9.21

Version 1.9.20

Version 1.9.19

Version 1.9.18

Version 1.9.17

Version 1.9.16

Version 1.9.15

Version 1.9.14

Version 1.9.13

Version 1.9.10 + 1.9.12

Version 1.9.10 + 1.9.11

Version 1.9.9

Version 1.9.8

Version 1.9.7

Version 1.9.6

Version 1.9.5

Version 1.9.4

Version 1.9.3

Version 1.9.2

Version 1.9.1

Version 1.9.0

Version 1.8.9

Version 1.8.8

Version 1.8.7

Version 1.8.6

Version 1.8.5

Version 1.8.4

version 1.8.3

Version 1.8.2

Version 1.8.1

Version 1.8.0

Version 1.7.5

Version 1.7.4-B

Version 1.7.4

Version 1.7.2 & 1.7.3

Version 1.7.1 click here to view

Version 1.7.0

Version 1.6.2 click here to view

Version 1.6.1

Version 1.6.0

Version 1.5.4

Version 1.5.3

Version 1.5.1

Version 1.5.0

Version 1.4.5 (Last version using the alt code) click here to view

Version 1.4.3

Versions 1.3.3 to 1.4.2: (requested custom versions)

Version 1.3.2:

Version 1.3.1:

Version 1.3.0:

Version 1.2.0 - 1.2.2: (please do not use and upgrade to 1.3.0 or greater)

Version 1.1.0 - abandoned

Original version 1.0.0 - 1.0.2


Please contact me if you have questions, comments and or suggestions at:
bob{@}decorplanit.com (remove brackets)


Created & maintained by Bob Knothe

Copyright "All rights reserved"