jquery-numberformatter插件

浏览数：29 / 时间：2015年06月09日

项目地址：https://code.google.com/p/jquery-numberformatter/

非jquery版：https://github.com/andrewgp/jsNumberFormatter

Example #1
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).parseNumber({format:"#,###.00", locale:"us"});
   $(this).formatNumber({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".

Example #2
Say we have 2 text input fields, one accepts US format numbers, the other unformatted numbers only. When the user loses focus on the formatted input it parses the data and puts the number into the second input, when the user loses focus on the second input it formats the number back to the first input box. This is just to demonstrate how to parse and format values.

$("#salaryUS").blur(function(){
   // take US format text into std number format
   var number = $(this).parseNumber({format:"#,###.00", locale:"us"}, false);
   // write the number out
   $("#salaryUnformatted").val(number);
                
   // OR
                
   number = $(this).val();
   number = $.parseNumber(number, {format:"#,###.00", locale:"us"});
   $("#salaryUnformatted").val(number);
});
        
$("#salaryUnformatted").blur(function(){
   // take the unformatted text and format into US number format
   $("#salaryUS").val($(this).val());
   $("#salaryUS").formatNumber({format:"#,###.00", locale:"us"});
                
   // OR
                
   var number = $(this).val();
   number = $.formatNumber(number, {format:"#,###.00", locale:"us"});
   $("#salaryUS").val(number);
});

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, zero shows as absent
# = Digit
. = 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.