autoNumeric() - "₩ith In₮€r₦a₮io₦£   ₡urr€₦¢¥  $¥mbo₤   $u₱₱or₮"

Download: autoNumeric-1.5.4.js - 'heavy on comments' Download: autoLoader.js

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

A flexible plugin that supports International numeric & currency formats and automatically places a thousand separators as you type. Here are some of the key features on this jQuery™ plugin::

• Compatible with jQuery-1.3.2 and higher

• Supports multiple international numeric formats including those used in most of Europe, North and South America, Asia and India's (lakhs). The varied formats are controlled Metadata (new) placed in the input tag. Multiple formats can reside on the same page. Please see the Metadata code generator below - it is easy to use!

• Most currency symbols (new) are supported and can be placed as a prefix or suffix in the input field

• Supports nine different rounding methods (Round-Half-Up Symmetric & Asymmetric, Round-Half-Down Symmetrical & Asymmetric, Round-Half-Even "Bankers Rounding", Round Up, Round Down, Round to Ceiling & Round to Floor).

• Included are two public functions that allow you to either strip the format so math operation can be preformed and the other is to format values from other functions.

• I have tried to keep this plugin as unobtrusive and flexible as possible. There is no JS code or calls in the markup. This is not a mask - The client is only allowed to enter numeric values and the decimal separator and/or negative sign if the input field is configured to do so (more on this later).

• Maximum and minimum values are controlled by the number of digits to the left and right of the decimal separator. So if three digits (integers) are assigned to the left and right of the decimal separator the max value is '999.999'

• Field can be positive only or positive & negative.

• Paste values are accepted in IE, FF, Chrome & Safari. (Thanks to Josh at Digitalbush)

• This version is NOT compatible versions prior to 1.5.0

Implementing:

First - include the jQuery.js, autoNumeric.js and autoLoader.js javascript files in the header. If you are going to use the options also add the metadata plugin.

<SCRIPT src="jquery-1.4.2.min.js" type=text/javascript></SCRIPT>

<SCRIPT src="jquery.metadata.js" type=text/javascript></SCRIPT> //needed if changing defaults

<SCRIPT src="autoNumeric-1.5.4.js" type=text/javascript></SCRIPT>

<SCRIPT src="autoLoader.js" type=text/javascript></SCRIPT> Click for detailed info

<input id="some ID" value="" type="text" class="auto" size="25" />

This demonstrates the defaults when no metadata is added to the input tag. The second and third columns show the strip and format functions respectively - more on this later.

Third - If you want to change the default settings you can modify the default values or add metadata to the input tag as well as the jquery.metadata.js plugin. Adding metadata allows each field to have its own unique settings. Please visit the jQuery meta plugin page for information on the latest version http://plugins.jquery.com/project/metadata

<input id="name" value="" type="text" class="auto {aSep: '.', aDec: ',', aSign: '€'}" size="25" />

I will go through each option (key) and the values that can be changed to obtain the desired format. There are 9 options that can be used in the metadata code if the defaults do not meet your requirements.

Checking on the options below will generate the metadata code string for the desired format. This can be copied and pasted into your targeted input field.

Note: these are case sensitive and deviating from the suggested options may produce unexpected results

The table below demonstrates the flexibility of the autoNumeric plugin and it's ability to format to different international standards.

The first column allows the user to enter the value and formats as you type. Several formats are demonstrated.

The 2nd and 3rd columns are populated on the blur event; however you can choose any event or action.

There are two public functions that are use in the above table that are called from another script.

The second column shows demonstrates the 'Strip' function. If the decimal separator is a comma it will be converted to a period. This takes one argument - the id of input field you want to have the formatting removed as the argument.

$.fn.autoNumeric.Strip(id, {options} ); Detailed description of the strip function

The third column demonstrates the 'Format' function which requires two arguments. The target input id and the value (non-formatted) to be formatted. Again this column is populated on the blur event; however you can choose any event or action.

$.fn.autoNumeric.Format(id, value, {options}); Detailed description of the strip function

Dynamically loaded values; Assigning values once the page is ready can easily be accomplished with the format function, just be sure the string/value does not have any format (99999.99). Here is an example using JSON data on the ready event.

Paste function; try pasting various values including some with mixed text and numbers in the first column on the above table. Notes on the pasting abilities and limitations:

• Only assigned characters are allowed. Others will be cleared (1P23X4 will result in 1234 with the letter P & X being dropped).

• The pasted value can not exceed the input field's assigned limits. Example: If the target input is assigned 8 integers and the user attempts to paste 8 the will result in a 0 value. Also the pasted length can not exceed 25.

• The only characters recognized by the field are numeric, decimal separator and the negative sign if allowed. If the pasted value has characters that are not recognized by the input field they will be discarded (Decimal separator = '.' & a pasted value of 'ju1,876.88' = '1876.88' before formatting.

• If the number of decimal places exceeds the fields setting it is rounded using the method assigned to that field.

• Only one leading zero is accepted (00.00 results in 0.00).

• The pasted value inherits the format assigned to the target field. Example: if the target input field has the format set where the comma is assigned as the decimal separator and you are pasting the following value '1,234,567.99' the result = 1.234,57 after formatting.

• If multiple decimal characters are pasted the result will be zero.

• If the input field is configured to accept the negative symbol, there must be only one and it must be the first character. If not the result is zero.

• Note: Opera does not fire on the paste event - so there is a small routine the executes the autoCheck() on the change event.

Rounding function - The below table is for testing the rounding methods that are supported. Experiment by entering various values in the upper left input field. The right column will display the 9 different rounding methods. Decimal places can range from 0 to 9.

For further details on rounding the DIY Calculator site is a excellent resource. Additional information can be found on Wikipedia.

Version 1.5.4

• Added padding option - see aPad above for greater details - special thanks Jonas Johansson for his contribution
• Fixed select all (ctrl + a)
• Fixed caret position when a negative sign is added when a currency symbol is present

Version 1.5.3

• Corrected issues with id's that used special characters - Thanks Anthony & Evan C. (read more)
• MAC command key is now recognized (version 1.5.2) - Thanks Bart B.
• Changed the blur event to change - this corrected the onchange not being thrown in IE7/IE8 - Thanks Javier P.

Version 1.5.1

• Corrected return key support (thanks Bart B.)

Version 1.5.0

• Added currency symbol support
• Added meta data support and eliminated alt code that was used in previous versions.

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

• Correct caret position when one digit was present (thanks Bart V.)

Version 1.4.3

• Added set caret routine to the keyup event. Keeps the caret in the proper place after the format routine
• Added focus event handler - corrected issues with pages that have multiple formats
• Corrected the focus control when client tabs in to the field on the keyup event (reverted to earlier version)
• Corrected the Caps Lock key issue on the keyup event.
• Change the leading zero routine to the above
• Added routine that handles values that exceed to set maximum
• Corrected the browser hang up issue when no thousand separator is used in chrome and Safari

Versions 1.3.3 to 1.4.2: (requested custom versions)

Version 1.3.2:

• Changed keyup event and replaced e.keyCode
• Corrected a "bad assignment" - JSLint Gotch Yah

Version 1.3.1:

• Allow input to remain blank no value stays no value

Version 1.3.0:

• Added keyDown keyCode support
• Corrected "tab in" focus IE issue - you can now over wright or delete the hi-lighted portion of the input value even when field has reached max length. Thanks Bart
• Corrected the "tab out" issue in Opera. Version 1.3.2:
• Eliminated the Opera specific call that was meant to handle a paste event
• jQuery 1.4 compatible

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

• Removed the Dom Calls and replaced with jQuery
• Added Home and End (e.keyCode 35 & 36) support to the keyup event (thanks JPM USA)

Version 1.1.0 - abandoned

Original version 1.0.0 - 1.0.2

Known issues (Help here is appreciated):

• HTML5 when input type=number.

Future improvements:

• iPhone compatible.
• HTML5 compatible.
• Clean the code and reduce the footprint.

Limited testing conducted on the following browsers:

• Firefox 3.6.6
• Opera 10.60
• Safari 5.0 WIN
• Chrome 5.0.375.99
• IE 7.0.5730.13

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