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ǔ)充。
例子
<!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屬性): </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)容): </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)容): </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'的話(huà)為'123,123','4'的話(huà)為'12,3123','2'的時(shí)候好像是印度那邊有這種分法，看原文作者寫(xiě)的)
第五個(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:包括大小寫(xiě),它會(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"(銀行家算法?沒(méi)用過(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"
例子
復(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屬性): </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)容): </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)容): </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'的話(huà)為'123,123','4'的話(huà)為'12,3123','2'的時(shí)候好像是印度那邊有這種分法，看原文作者寫(xiě)的)
第五個(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:包括大小寫(xiě),它會(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"(銀行家算法?沒(méi)用過(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ī)則有一篇英文文章，可以參考。
還有一些關(guān)于粘貼的特性和數(shù)字修約的一些例子就不一一介紹了。有興趣的可以上作者的原文看看。
非常感謝作者能提供一個(gè)這么好的Jquery plugin.
測(cè)試代碼打包http://xiazai.jb51.net/200911/yuanma/numeric-demo.rar相關(guān)文章
ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能示例
這篇文章主要介紹了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能,結(jié)合實(shí)例形式分析了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
建立良好體驗(yàn)度的Web注冊(cè)系統(tǒng)ajax
建立良好體驗(yàn)度的Web注冊(cè)系統(tǒng)ajax...2007-07-07
JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
JavaScript實(shí)現(xiàn)的原生態(tài)兼容IE6可調(diào)可控滾動(dòng)文字功能詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的原生態(tài)兼容IE6可調(diào)可控滾動(dòng)文字功能,簡(jiǎn)單說(shuō)明了文字滾動(dòng)的實(shí)現(xiàn)原理并結(jié)合具體實(shí)例形式給出了javascript文字滾動(dòng)功能的具體實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-09-09
fullpage.js全屏滾動(dòng)插件使用實(shí)例
這篇文章主要介紹了fullpage.js全屏滾動(dòng)插件使用,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
調(diào)用innerHTML之后onclick失效問(wèn)題的解決方法
調(diào)用innerHTML之后，onclick失效了，這也是在意料之中的，因?yàn)閕nnerHTML是以文本形式插入的button，所以無(wú)法識(shí)別onclick事件2014-01-01
淺析script標(biāo)簽中的defer與async屬性
最近在網(wǎng)上看到一個(gè)前輩在寫(xiě)script標(biāo)簽的時(shí)候，居然同時(shí)寫(xiě)了async和defer屬性，想著這是什么意思呢？所以決定深入的了解下這其中的學(xué)問(wèn)，以下這篇文章就是個(gè)人在學(xué)習(xí)了之后的一些總結(jié)分析，有需要的朋友們可以參考借鑒，下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
前端算法題解leetcode114二叉樹(shù)展開(kāi)為鏈表
這篇文章主要為大家介紹了前端算法題解leetcode114二叉樹(shù)展開(kāi)為鏈表，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
JS對(duì)象轉(zhuǎn)換為Jquery對(duì)象示例
JS對(duì)象轉(zhuǎn)換為Jquery對(duì)象的方便在于可以使用jquery的一些方法，下面有個(gè)示例，大家可以參考下2014-01-01
不是效率的問(wèn)題 是 內(nèi)存碎片的問(wèn)題 用數(shù)組速度比“+”要慢 只是內(nèi)存占的少和內(nèi)存碎片少一些，現(xiàn)在根本不推薦用數(shù)組來(lái)處理了。2010-12-12