快捷導(dǎo)航

JavaScript實(shí)現(xiàn)仿淘寶商品購(gòu)買(mǎi)數(shù)量的增減效果

更新時(shí)間：2016年01月22日 09:59:02 作者：史林楓

最近接了個(gè)項(xiàng)目，要開(kāi)發(fā)一個(gè)地方的O2O租書(shū)項(xiàng)目，使用的是asp.net mvc技術(shù)，其中咋圖書(shū)詳情頁(yè)，用戶可以輸入借閱的數(shù)量，器實(shí)現(xiàn)此功能的方法是使用了js來(lái)控制數(shù)量的增減和校驗(yàn)，對(duì)js實(shí)現(xiàn)商品數(shù)量的增減功能感興趣的朋友一起學(xué)習(xí)吧

近期在開(kāi)發(fā)一個(gè)地方O2O租書(shū)項(xiàng)目，使用ASP.NET MVC技術(shù)，其中在圖書(shū)詳情頁(yè)，用戶可以輸入借閱的數(shù)量，這里使用了js來(lái)控制數(shù)量的增減和校驗(yàn)。

1.數(shù)量一定是數(shù)字

2.點(diǎn)擊增減按鈕的時(shí)候要能自動(dòng)加1或減1

3.用戶輸入的內(nèi)容如果是非數(shù)字，則不能輸入(退格鍵除外)

4.用戶輸入的值最小為1

5.輸入框離開(kāi)焦點(diǎn)時(shí)要檢查取值范圍，確保輸入框中必須是范圍內(nèi)的數(shù)字

基本就是以上幾點(diǎn)

效果如下：

以下是Html代碼

<div class="bookNum">
<a id="sub" href="javascript:void(0);">-</a>
<input type="text" value="1" id="bookNum">
<a id="add" href="javascript:void(0);">+</a>
<a href="javascript:void(0);" id="addCart">加入借閱臺(tái)</a>
<div class="clear"></div>
</div>

首先看第一條：

輸入一定是數(shù)字

這很容易想到用keyup事件監(jiān)測(cè)，用正則表達(dá)式替換非數(shù)字字符

$("#bookNum").keyup(function(){
var regex = /[^\d]*/g;
var numVal = $(this).val();
numVal = numVal.replace(regex,"");
numVal = parseInt(numVal)||;
numVal = numVal < ? : numVal;
$(this).val(numVal);
});

這樣就可以保證用戶輸入的一定是數(shù)字了，并且我們中間做了校驗(yàn)，如果使用parseInt轉(zhuǎn)換為整數(shù)后值是NaN，就讓值為1 ，但是我們會(huì)發(fā)現(xiàn)一個(gè)現(xiàn)象，就是用戶如果想清空里面的值輸入20的時(shí)候，發(fā)現(xiàn)里面的值總是會(huì)變成1

這是不合理的，并且體驗(yàn)也不好，在輸入非數(shù)字的時(shí)候，會(huì)先顯示那個(gè)字符，然后被替換掉。

再觀察一下當(dāng)當(dāng)網(wǎng)，京東這些網(wǎng)站，當(dāng)輸入非數(shù)字時(shí)，輸入框根本就不會(huì)有任何動(dòng)靜，退格后還能隨意輸入數(shù)字。經(jīng)研究發(fā)現(xiàn)，他們使用了監(jiān)控鍵盤(pán)的方法，攔截輸入。

經(jīng)過(guò)改進(jìn)后：

$("#bookNum").keypress(function(b) {
var keyCode = b.keyCode ? b.keyCode : b.charCode;
if (keyCode != 0 && (keyCode < 48 || keyCode > 57) && keyCode != 8 && keyCode != 37 && keyCode != 39) {
return false;
} else {
return true;
}
})

這樣我們保證了在用戶使用取消回車(chē)(0)，退格(8)，左右箭頭(37 39)和數(shù)字時(shí) 正常輸入，其他按鍵就統(tǒng)統(tǒng)失效了。這樣就能保證輸入的內(nèi)容是數(shù)字了。

但是還有一個(gè)問(wèn)題，用戶使用退格鍵將內(nèi)容清空后，用戶沒(méi)有輸入的時(shí)候，值為空

這就要使用keyup和blur事件來(lái)彌補(bǔ)了

$("#bookNum").keypress(function(b) {
var keyCode = b.keyCode ? b.keyCode : b.charCode;
if (keyCode != 0 && (keyCode < 48 || keyCode > 57) && keyCode != 8 && keyCode != 37 && keyCode != 39) {
return false;
} else {
return true;
}
}).keyup(function(e) {
var keyCode = e.keyCode ? e.keyCode : e.charCode;
console.log(keyCode);
if (keyCode != 8) {
var numVal = parseInt($("#bookNum").val()) || 0;
numVal = numVal < 1 ? 1 : numVal;
$("#bookNum").val(numVal);
}
}).blur(function() {
var numVal = parseInt($("#bookNum").val()) || 0;
numVal = numVal < 1 ? 1 : numVal;
$("#bookNum").val(numVal);
});

這樣就能保證用戶在輸入數(shù)字的時(shí)候的校驗(yàn)。

使用按鈕控制就更容易了：

//增加
$("#add").click(function() {
var num = parseInt($("#bookNum").val()) || 0;
$("#bookNum").val(num + 1);
});
//減去
$("#sub").click(function() {
var num = parseInt($("#bookNum").val()) || 0;
num = num - 1;
num = num < 1 ? 1 : num;
$("#bookNum").val(num);
});

好了，這樣就完美解決用戶輸入了。

當(dāng)然，這里僅僅說(shuō)明了js的控制，里面還可以加入其它控制，比如最大限制，庫(kù)存查詢，服務(wù)器校驗(yàn)等。這里就不再贅述。

您可能感興趣的文章: