zoukankan      html  css  js  c++  java
  • jquery-numberformatter插件

    项目地址: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.

    • 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"
  • 相关阅读:
    如何设置body高度为浏览器高度
    h5的video下载按钮如何隐藏
    微信小程序中的子父组件传值问题
    elementUI级联选择器2(选择及回显)编辑保存
    elementUI级联选择器(选择及回显)
    vue+elementUI 表格操作行的增删改查
    单独验证非form表单中的input(限制)
    JS中去除数组中的假值(0, 空,undefined, null, false)
    vue 组件之间的传值 (父子传值、兄弟传值)
    http协议的状态码
  • 原文地址:https://www.cnblogs.com/weekend001/p/3899115.html
Copyright © 2011-2022 走看看