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

jquery-numberformatter插件的更多相关文章

  1. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  2. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  3. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  4. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  5. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  6. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  7. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

  8. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  9. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  10. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

随机推荐

  1. python2018年秋季调研

    在2018年秋季,Python软件基金会与JetBrains发起了年度Python开发者调查. 报告的目的是寻找Python领域的新趋势,帮助开发者深入了解2018年Python开发者的现状. 本报告 ...

  2. 解决kali linux使用metasploit报错办法

    curl https://raw.githubusercontent.com/rapid7/metasploit-omnibus/master/config/templates/metasploit- ...

  3. C语言——常用标准输入输出函数 scanf(), printf(), gets(), puts(), getchar(), putchar(); 字符串拷贝函数 strcpy(), strncpy(), strchr(), strstr()函数用法特点

    1 首先介绍几个常用到的转义符 (1)     换行符“\n”, ASCII值为10: (2)     回车符“\r”, ASCII值为13: (3)     水平制表符“\t”, ASCII值为 9 ...

  4. Linux | GCC如何实现代码编译&&汇编&&链接过程

      正文: 每次我们程序员所写的 代码 是给程序员看的呢?还是给电脑看的?其实我们所写的代码只是我们程序员之间交流的一样特殊语言,电脑是看不懂的.那么我们如何实现人机交流呢?这就不得不请出我们我们今天 ...

  5. C++快速开发样本工程的建立--简介

    背景 在开发项目过程中,一些功能库能反复被写被用,可以写成库被重用: 但是行业业务也随着换项目,每次重新写一次,如果把一些功能业务和框架绑定,配置绑定,只需要添加,修改,增加业务功能,就可以搭建C++ ...

  6. IIC总线(集成电路总线)

    三大串行总线:UART.SPI.IIC(其中SPI是由时钟沿采集数据,为同步接口:UART和IIC是由电平采集数据,为异步接口) IIC速率:工作在半双工方式,2根线(SCL和SDA) 标准:100k ...

  7. 【转】如何内网搭建NuGet服务器

    原文:http://www.cnblogs.com/zhangweizhong/p/7755332.html NuGet 是.NET程序员熟知的工具,它可以直接安装开源社区中的各个公用组件,可以说是非 ...

  8. pandas:由列层次化索引延伸的一些思考

    1. 删除列层次化索引 用pandas利用df.groupby.agg() 做聚合运算时遇到一个问题:产生了列方向上的两级索引,且需要删除一级索引.具体代码如下: # 每个uesr每天消费金额统计:和 ...

  9. 牛客网NOIP赛前集训营-提高组(第六场)-A-最长路[拓扑排序+hash+倍增]

    题意 给定一个 \(n\) 点 \(m\) 边的边权非负的有向图,边有字符,求以每个点为开头的最长路字典序最小的路径 \(hash\) 值. \(n,m\leq 10^6\) 分析 首先建反图拓扑排序 ...

  10. 【Java源码解析】ThreadLocal

    简介 线程本地变量,用于同一线程之间的传递.每一个线程对象都保存在两个ThreadLocalMap,threadLocals和inheritableThreadLocals,后者会继承父线程的本地变量 ...