最近在寫(xiě)購(gòu)物車界面，很明顯我們需要對(duì)用戶輸入的數(shù)量的Input輸入框輸入的內(nèi)容進(jìn)行判斷。首先，必須輸入數(shù)字（這樣也就解決了輸入負(fù)數(shù)的問(wèn)題，因?yàn)闇p號(hào)也是不允許輸入的~），然后就是數(shù)量大于1小于庫(kù)存數(shù)。
H5新增的input類型也有想到，但是type=numder它雖然有數(shù)量限制，可是僅僅是點(diǎn)擊它的加減的時(shí)候才可以生效的，手動(dòng)收入時(shí)是無(wú)效的。<input type="range" name="points" min="1" max="10" />，樣式是這樣的：
type=range.png
顯然不合適。
H5新增的type類型還有：email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color
所以，還是用type="text"來(lái)寫(xiě)的。
上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>購(gòu)物車輸入數(shù)量判斷</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<b>數(shù)量：</b><input type="text" class="count" value="1"><b>庫(kù)存：</b><span class="max">993</span>
</body>
<script type="text/javascript">
//購(gòu)物車數(shù)量輸入框數(shù)量判斷
$(".count").keyup(function () {
this.value=this.value.replace(/\D/g,'');
if($(this).val() < 1) {
$(this).val(1);
}else if (Number($(this).val()) > Number($(".max").text())) {
$(this).val($(".max").text());
}
});
</script>
</html>
- 主要思想就是監(jiān)聽(tīng)鍵盤(pán)keyup事件，對(duì)輸入框輸入的值進(jìn)行正則驗(yàn)證，不是數(shù)字時(shí)替換為空(replace方法)。然后就是對(duì)輸入的值進(jìn)行判斷，小于1是讓它等于1，大于庫(kù)存時(shí)讓它等于庫(kù)存。
- 由于獲取到的input的value值和庫(kù)存的值都是string，他們直接比較是按照unicode編碼值（16進(jìn)制來(lái)表示字符串）進(jìn)行比較的。所以需要進(jìn)行Number轉(zhuǎn)換。只有當(dāng)一個(gè)為數(shù)字一個(gè)為字符串時(shí)才會(huì)進(jìn)行隱式轉(zhuǎn)換。
做個(gè)筆記：購(gòu)物車經(jīng)常需要對(duì)金額去小數(shù)點(diǎn)后兩位，可以用Number.toFixed(2)方法就可以啦！
