数字输入框(包括最大值最小值限制和四舍五入)

以前需要做一个数字输入的InputBox,结果无奈需求太BT，搞得焦头烂额，重做了无数次。无奈之下，再次Google，发现早有成熟的插件了(闷在家里造轮子果然不好啊)，autoNumeric使用方便，功能强大，现在介绍给大家，一个非常好的jquery plugin。

　　原文地址: http://www.decorplanit.com/plugin/

由于原文已经介绍的很好了，现在只是一些翻译和小小的补充。

例子

   1 

 2  <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
 3  < html xmlns = " http://www.w3.org/1999/xhtml "   >
 4  < head >
 5  < title > Demo < / title>
 6  < script type = " text/javascript "  src = " jquery-1.2.6.min.js " >< / script>
 7  < script type = " text/javascript "  src = " autoNumeric.js " >< / script>
 8  < script type = " text/javascript " >
 9      jQuery( function ($) {
10          $( ' :text ' ).focus( function (){
11              $( ' :text ' ).autoNumeric();
12          });
13      }); 
14      
15       var  change  =   function (){
16           // Change the rule.
17          $( " :text[id$='text1'] " ).attr( ' alt ' , ' p2c3p0s ' );
18           // Clear the text
19          $( " :text[id$='text1'] " ).val( '' );
20          $( " span[id$='lblrule'] " ).text( ' 格式:99(范围为0-99) ' );
21      }
22      
23       var  show  =   function (){
24           // format the text2 and text3.
25           var  convertInput  =  $.fn.autoNumeric.Strip($( " :text[id$='text1'] " ).attr( " id " ));
26          $( " :text[id$='text2'] " ).val(convertInput);
27          $( " :text[id$='text3'] " ).val($.fn.autoNumeric.Format($( " :text[id$='text3'] " ).attr( " id " ), convertInput));
28      }
29  < / script>
30  < / head>
31  < body >
32  < table >
33       < tr >
34           < td >
35               < span id = ' lblrule '   > 格式: 9999.99 (范围为0 - 9999.99 )(动态修改alt属性): & nbsp; & nbsp; < / span>
36           < / td>
37           < td >
38               < input id = " text1 "  value = ""  type = " text "  style = " TEXT-ALIGN: right "  alt = " p4c3p2s "  size = " 25 "   / >
39               < input type = " button "  value = ' 格式化显示 '  onclick = " show(); "   / >
40               < input type = " button "  value = ' 改变属性 '  onclick = " change(); "/ >
41           < / td>
42       < / tr>
43       < tr >
44           < td >
45               < span id = ' lbl1 '   > 利用Strip()方法去掉了格式,如 ' 1,123 ' 变为 ' 1123 ' (仅显示第一个文本框内容): & nbsp; & nbsp; < / span>
46           < / td>
47           < td >
48               < input id = " text2 "  value = ""  type = " text "  style = " TEXT-ALIGN: right "  readonly = " readonly "  alt = " p4c3p0S "  size = " 25 "   / >
49           < / td>
50       < / tr>
51       < tr >
52           < td >
53               < span id = ' lbl2 '   > 格式化数字,这里做的是四舍五入取整,如 ' 5.6 ' 变为 ' 6 ' (仅显示第一个文本框内容): & nbsp; & nbsp; < / span>
54           < / td>
55           < td >
56               < input id = " text3 "  value = ""  type = " text "  style = " TEXT-ALIGN: right "  readonly = " readonly "  alt = " p4c3p0S "  size = " 25 "   / >
57           < / td>
58       < / tr>
59  < / table>
60  < / body>
61  < / html>

本plugin的特性:

1.只能输入数字，小数分隔符(包括小数点),负号.

2.支持在同一个页面上每个text input的不同输入格式,也就是说可以对页面上每一个输入框进行自定义设置.

3.九种不同的数字修约规则(就是四舍五入那些)

4.可以分别针对整数和小数设置最大值，最小值(很好用)

5.输入值可以只为正数，也可以正负数.

6.只有小数和零时，前导符可以为零。不过如输入数为"900"时，删掉"9"它会保留00.

7.支持粘贴，不过粘贴文字时会变成"0.00".

8.公共方法Strip()可以去掉格式化.

9.公共方法Format()可以将需要的值进行格式化.

 

关于alt属性中的设置:

alt中一共有7个字符，分别代表了7个格式化属性:

第一个:值为'p'(只能输入正数)或者'n'(正负都可以输入)

第二个:值为0-9,分别代表小数点分隔符左边的位数.(当为'0'时可以输入15位整数)

第三个:用做数字分组的分隔符(就是千分位等等用的分隔符)

a:单引号或撇号(计时和角度时可以用)

c:逗号(默认)

p:句号(如果小数点的分隔符也是句号会有冲突)

s:空格号

x:无

第四个:值为2,3(默认),4,用作数字分组的数字个数(如'3'的话为'123,123','4'的话为'12,3123','2'的时候好像是印度那边有这种分法，看原文作者写的)

第五个:小数点的分隔符.值有c(逗号)和p(句号),p为默认.

第六个:小数位的个数

0:不允许输入小数，也就是说只能输入整数

1-9:小数位数(默认为2,如'1.23')

a-Z:包括大小写,它会找id为'dp[a-Z]'的数字输入框，并将里面的数字作为小数的位数，也就是说可以动态修改小数位数.

第七个:九种不同的数字修约规则

S = Round-Half-Up Symmetric (默认，一般四舍五入就用它了)

A = Round-Half-Up Asymmetric

s = Round-Half-Down Symmetric

a = Round-Half-Down Asymmetric

B = Round-Half-Even "Bankers Rounding"(银行家算法?没用过)

U = Round Up "Round-Away-From-Zero"(最大整数时用这个,当然不仅仅是整数范畴，可以精确到小数位)

D = Round Down "Round-Toward-Zero"(最小整数时用这个)

C = Round to Ceiling "Toward Positive Infinity"

F = Round to Floor "Toward Negative Infinity"

 

关于这个数字修约规则有一篇英文文章，可以参考。

http://www.diycalculator.com/popup-m-round.shtml

还有一些关于粘贴的特性和数字修约的一些例子就不一一介绍了。有兴趣的可以上作者的原文看看。

非常感谢作者能提供一个这么好的Jquery plugin.

Demo地址:Demo