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

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

由於原文已經介紹的很好了，現在只是一些翻譯和小小的補充。
例子複製代碼代碼如下:<!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)(動態修改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'變為'1123'(僅顯示第一個文字框內容): </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' >格式化數字,這裡做的是四捨五入取整,如'5.6'變為'6'(僅顯示第一個文字框內容): </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的特性:

.只能輸入數字，小數分隔字元(包括小數點),負號.
.支援在同一個頁面上每個text input的不同輸入格式,也就是說可以對頁面上每一個輸入框進行自訂設定.
.九種不同的數字修約規則(就是四捨五入那些)
.可以分別針對整數和小數設定最大值，最小值(很好用)
.輸入值可以只為正數，也可以正負數.
.只有小數和零時，前置字元可以為零。不過如輸入數為"900"時，刪掉"9"它會保留00.
.支援粘貼，不過粘貼文字時會變成"0.00".
.公用方法Strip()可以去掉格式化.
.公用方法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為預設.
第六個:小數位的個數
:不允許輸入小數，也就是說只能輸入整數
-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.

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

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

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support