This plugin is a NumberFormatter plugin. Number formatting is likely familiar to anyone who's worked with server-side code like Java or PHP and who has worked with internationalization. People who aren't stuck in the US-centric frame of mind can quickly point out that people in other parts of the world don't format their numbers in the same way as Americans. For example, a number that we would write in the US as "1,250,500.75" would be written differently in different countries: "1.250.500,75" in Germany, "1 250 500,75" in France, and "1'250'500.75" in Switzerland, and "125,0500.75" in Japan. The number is exactly the same, but it's just written using a different format when presented to users of the web application.
Here's a typical use case for what I'm describing. You have an input field in your web application that asks a person for their salary. In the US, the user can type in a varied forms of input - "$65000", "65,000", "65000", "65,000.00". All these numbers are exactly the same, but we want to control how these numbers look on the screen.
Here's an example of how you'd use this plugin.
$("#salary").blur(function(){
$(this).format({format:"#,###.00", locale:"us"});});
This code will ensure that any text in the "salary" textfield will be formatted properly when the user tabs out of it. For example, the user can enter "65000", "65,000", "65000.00" and when they leave the field, the field will automatically format the number to be "65,000.00".
Right now there are dozens of countries supported. The syntax for the formatting follows that in the Java DecimalFormatter, so that you can provide a reliable format string on the server and client.
Syntax
The syntax for the formatting is:
- 0 = Digit
- # = Digit, zero shows as absent
- . = Decimal separator
- - = Negative sign
- , = Grouping Separator
- % = Percent (multiplies number by 100)
Supported Locales
Here are the supported Locales. They were chosen because a) they are offered by the Java DecimalFormatter or b) I just felt that they were interesting and wanted to include them.
- United States -> "us"
- Arab Emirates -> "ae"
- Egypt -> "eg"
- Israel -> "il"
- Japan -> "jp"
- South Korea -> "kr"
- Thailand -> "th"
- China -> "cn"
- Hong Kong -> "hk"
- Taiwan -> "tw"
- Australia -> "au"
- Canada -> "ca"
- Great Britain -> "gb"
- India -> "in"
- Germany -> "de"
- Vietnam -> "vn"
- Spain -> "es"
- Denmark -> "dk"
- Austria -> "at"
- Greece -> "gr"
- Brazil -> "br"
- Czech -> "cz"
- France -> "fr"
- Finland -> "fi"
- Russia -> "ru"
- Sweden -> "se"
- Switzerland -> "ch"
New in Version 1.1.2
1 major bug fixes, 1 minor fix, and 1 new feature included in this release. The bug fixes are
- Numbers that have more than one group separator in the pre-formatted number (e.g. 1,233,400) weren't formatted correctly, and threw an error (NaN) when they were formatted.
- Numbers with many decimals (e.g. 12.2345) when formatted with a format like this "#.##" were formatted into "12.2". Now, they will be formatted into "12.23". The proper way to do this would be to use the format "#.00", but now this alternative will also be supported
- There is a new option called "decimalSeparatorAlwaysShown" (defaults to 'false'), which you can use to override whether a decimal separator is always shown in numbers like 233, whether it should be formatted to "233" or "233.".
New in Version 1.1
I recommend everyone to move to the 1.1 version of the plugin, as it is more stable and contains more features.
- Added support for using the "%" character in formats. This will convert all numbers into their percent equivalent by multiplying them by 100. For example, if a user enters "0.125" and you specify a format of "#.0%", the text will be formatted to "12.5%"
- Added support for prefixes and suffixes that aren't part of the syntax. This is especially beneficial for currencies. For example, if a user enters "12.34" and you specify a format of "$#.##", the text will be formatted to "$12.34". Also, if you specify something like "#.## JPY", the same text will be formatted to "12.34 JPY".
- Added special exceptions for negative numbers to appear before any prefixes. So, for example, you can specify a format of "-$#.##" to display a formatted text of "-$12.34", or "$-#.##" to display a formatted text of "$-12.34", depending on your needs.
- The parse() function has been updated with all the above fixes as well.
- Various bug fixes that popped up from expanded testing