快捷導(dǎo)航

js數(shù)字輸入框(包括最大值最小值限制和四舍五入)

更新時(shí)間：2009年11月24日 20:58:53 作者：

以前需要做一個(gè)數(shù)字輸入的InputBox,結(jié)果無(wú)奈需求太BT，搞得焦頭爛額，重做了無(wú)數(shù)次。無(wú)奈之下，再次Google，發(fā)現(xiàn)早有成熟的插件了(悶在家里造輪子果然不好啊)，autoNumeric使用方便，功能強(qiáng)大，現(xiàn)在介紹給大家，一個(gè)非常好的jquery plugin。

由于原文已經(jīng)介紹的很好了，現(xiàn)在只是一些翻譯和小小的補(bǔ)充。
例子

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Demo</title> 
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="autoNumeric.js"></script> 
<script type="text/javascript"> 
jQuery(function($) { 
$(':text').focus(function(){ 
$(':text').autoNumeric(); 
}); 
}); 

var change = function(){ 
//Change the rule. 
$(":text[id$='text1']").attr('alt','p2c3p0s'); 
//Clear the text 
$(":text[id$='text1']").val(''); 
$("span[id$='lblrule']").text('格式:99(范圍為0-99)'); 
} 

var show = function(){ 
//format the text2 and text3. 
var convertInput = $.fn.autoNumeric.Strip($(":text[id$='text1']").attr("id")); 
$(":text[id$='text2']").val(convertInput); 
$(":text[id$='text3']").val($.fn.autoNumeric.Format($(":text[id$='text3']").attr("id"), convertInput)); 
} 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<span id='lblrule' >格式:9999.99(范圍為0-9999.99)(動(dòng)態(tài)修改alt屬性):&nbsp;&nbsp;</span> 
</td> 
<td> 
<input id="text1" value="" type="text" style="TEXT-ALIGN: right" alt="p4c3p2s" size="25" /> 
<input type="button" value='格式化顯示' onclick="show();" /> 
<input type="button" value='改變屬性' onclick="change();"/> 
</td> 
</tr> 
<tr> 
<td> 
<span id='lbl1' >利用Strip()方法去掉了格式,如'1,123'變?yōu)?1123'(僅顯示第一個(gè)文本框內(nèi)容):&nbsp;&nbsp;</span> 
</td> 
<td> 
<input id="text2" value="" type="text" style="TEXT-ALIGN: right" readonly="readonly" alt="p4c3p0S" size="25" /> 
</td> 
</tr> 
<tr> 
<td> 
<span id='lbl2' >格式化數(shù)字,這里做的是四舍五入取整,如'5.6'變?yōu)?6'(僅顯示第一個(gè)文本框內(nèi)容):&nbsp;&nbsp;</span> 
</td> 
<td> 
<input id="text3" value="" type="text" style="TEXT-ALIGN: right" readonly="readonly" alt="p4c3p0S" size="25" /> 
</td> 
</tr> 
</table> 
</body> 
</html> 

本plugin的特性:

.只能輸入數(shù)字，小數(shù)分隔符(包括小數(shù)點(diǎn)),負(fù)號(hào).
.支持在同一個(gè)頁(yè)面上每個(gè)text input的不同輸入格式,也就是說(shuō)可以對(duì)頁(yè)面上每一個(gè)輸入框進(jìn)行自定義設(shè)置.
.九種不同的數(shù)字修約規(guī)則(就是四舍五入那些)
.可以分別針對(duì)整數(shù)和小數(shù)設(shè)置最大值，最小值(很好用)
.輸入值可以只為正數(shù)，也可以正負(fù)數(shù).
.只有小數(shù)和零時(shí)，前導(dǎo)符可以為零。不過(guò)如輸入數(shù)為"900"時(shí)，刪掉"9"它會(huì)保留00.
.支持粘貼，不過(guò)粘貼文字時(shí)會(huì)變成"0.00".
.公共方法Strip()可以去掉格式化.
.公共方法Format()可以將需要的值進(jìn)行格式化.

關(guān)于alt屬性中的設(shè)置:

alt中一共有7個(gè)字符，分別代表了7個(gè)格式化屬性:
第一個(gè):值為'p'(只能輸入正數(shù))或者'n'(正負(fù)都可以輸入)
第二個(gè):值為0-9,分別代表小數(shù)點(diǎn)分隔符左邊的位數(shù).(當(dāng)為'0'時(shí)可以輸入15位整數(shù))
第三個(gè):用做數(shù)字分組的分隔符(就是千分位等等用的分隔符)
a:單引號(hào)或撇號(hào)(計(jì)時(shí)和角度時(shí)可以用)
c:逗號(hào)(默認(rèn))
p:句號(hào)(如果小數(shù)點(diǎn)的分隔符也是句號(hào)會(huì)有沖突)
s:空格號(hào)
x:無(wú)
第四個(gè):值為2,3(默認(rèn)),4,用作數(shù)字分組的數(shù)字個(gè)數(shù)(如'3'的話為'123,123','4'的話為'12,3123','2'的時(shí)候好像是印度那邊有這種分法，看原文作者寫的)
第五個(gè):小數(shù)點(diǎn)的分隔符.值有c(逗號(hào))和p(句號(hào)),p為默認(rèn).
第六個(gè):小數(shù)位的個(gè)數(shù)
:不允許輸入小數(shù)，也就是說(shuō)只能輸入整數(shù)
-9:小數(shù)位數(shù)(默認(rèn)為2,如'1.23')
a-Z:包括大小寫,它會(huì)找id為'dp[a-Z]'的數(shù)字輸入框，并將里面的數(shù)字作為小數(shù)的位數(shù)，也就是說(shuō)可以動(dòng)態(tài)修改小數(shù)位數(shù).
第七個(gè):九種不同的數(shù)字修約規(guī)則
S = Round-Half-Up Symmetric (默認(rèn)，一般四舍五入就用它了)
A = Round-Half-Up Asymmetric
s = Round-Half-Down Symmetric
a = Round-Half-Down Asymmetric
B = Round-Half-Even "Bankers Rounding"(銀行家算法?沒用過(guò))
U = Round Up "Round-Away-From-Zero"(最大整數(shù)時(shí)用這個(gè),當(dāng)然不僅僅是整數(shù)范疇，可以精確到小數(shù)位)
D = Round Down "Round-Toward-Zero"(最小整數(shù)時(shí)用這個(gè))
C = Round to Ceiling "Toward Positive Infinity"
F = Round to Floor "Toward Negative Infinity"

關(guān)于這個(gè)數(shù)字修約規(guī)則有一篇英文文章，可以參考。

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

還有一些關(guān)于粘貼的特性和數(shù)字修約的一些例子就不一一介紹了。有興趣的可以上作者的原文看看。

非常感謝作者能提供一個(gè)這么好的Jquery plugin.

測(cè)試代碼打包http://xiazai.jb51.net/200911/yuanma/numeric-demo.rar

您可能感興趣的文章: