JavaScript implements the effect of increasing or decreasing the purchase quantity of imitation Taobao products_javascript skills

Recently, I am developing a local O2O book rental project, using ASP.NET MVC technology. On the book details page, users can enter the borrowed quantity. JS is used here to control the increase, decrease and verification of the quantity.

1. The quantity must be a number

2. When clicking the increase or decrease button, it must be able to automatically increase or decrease by 1

3. If the content entered by the user is non-numeric, it cannot be entered (except the backspace key)

4. The minimum value entered by the user is 1

5. When the input box leaves the focus, check the value range to ensure that the input box must be a number within the range

Basically the above points

The effect is as follows:

The following is the Html code

<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> 

Look at the first item first:

The input must be numbers

It is easy to think of using keyup event monitoring and replacing non-numeric characters with regular expressions

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

In this way, we can ensure that the user input must be a number, and we have done verification. If the value is NaN after converting to an integer using parseInt, let the value be 1. However, we will find a phenomenon that if the user When I want to clear the value inside and enter 20, I find that the value inside always changes to 1

This is unreasonable and the experience is not good. When entering non-digits, that character will be displayed first and then replaced.

Look at websites such as Dangdang and JD.com. When entering non-numbers, there will be no movement at all in the input box. After backspace, you can enter numbers at will. After research, it was found that they used the method of monitoring the keyboard to intercept input.

After improvements:

$("#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;
}
})

In this way, we ensure that when the user cancels Enter (0), Backspace (8), left and right arrows (37 39) and numbers, they can input normally, and all other keys will be invalid. This will ensure that the input content is a number.

But there is another problem. After the user uses the backspace key to clear the content, the value is empty when the user does not enter anything

This needs to be compensated by using keyup and blur events

$("#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);
}); 

This will ensure verification when users enter numbers.

It’s even easier with button controls:

//增加
$("#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 &#63; 1 : num;
$("#bookNum").val(num);
}); 

Okay, this perfectly solves the problem of user input.

Of course, this only explains the js control, other controls can also be added, such as maximum limit, inventory query, server verification, etc. I won’t go into details here.