近期在開發(fā)一個地方O2O租書項目，使用ASP.NET MVC技術(shù)，其中在圖書詳情頁，用戶可以輸入借閱的數(shù)量，這里使用了js來控制數(shù)量的增減和校驗。
1.數(shù)量一定是數(shù)字
2.點擊增減按鈕的時候要能自動加1或減1
3.用戶輸入的內(nèi)容如果是非數(shù)字，則不能輸入(退格鍵除外)
4.用戶輸入的值最小為1
5.輸入框離開焦點時要檢查取值范圍，確保輸入框中必須是范圍內(nèi)的數(shù)字
基本就是以上幾點
效果如下：
以下是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">加入借閱臺</a><div class="clear"></div></div>
首先看第一條：
輸入一定是數(shù)字
這很容易想到用keyup事件監(jiān)測，用正則表達(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ù)字了，并且我們中間做了校驗，如果使用parseInt轉(zhuǎn)換為整數(shù)后值是NaN，就讓值為1 ，但是我們會發(fā)現(xiàn)一個現(xiàn)象，就是用戶如果想清空里面的值輸入20的時候，發(fā)現(xiàn)里面的值總是會變成1
這是不合理的，并且體驗也不好，在輸入非數(shù)字的時候，會先顯示那個字符，然后被替換掉。
再觀察一下當(dāng)當(dāng)網(wǎng)，京東這些網(wǎng)站，當(dāng)輸入非數(shù)字時，輸入框根本就不會有任何動靜，退格后 還能隨意輸入數(shù)字。經(jīng)研究發(fā)現(xiàn)，他們使用了監(jiān)控鍵盤的方法，攔截輸入。
經(jīng)過改進(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;}})這樣我們保證了在用戶使用取消回車(0)，退格(8)，左右箭頭(37 39)和數(shù)字時 正常輸入，其他按鍵就統(tǒng)統(tǒng)失效了。這樣就能保證輸入的內(nèi)容是數(shù)字了。
但是還有一個問題，用戶使用退格鍵將內(nèi)容清空后，用戶沒有輸入的時候，值為空
這就要使用keyup和blur事件來彌補了
$("#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ù)字的時候的校驗。
使用按鈕控制就更容易了：
//增加$("#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)然，這里僅僅說明了js的控制，里面還可以加入其它控制，比如最大限制，庫存查詢，服務(wù)器校驗等。這里就不再贅述。
新聞熱點
疑難解答
