Methods for implementing input numerical increment and decrement using jquery _jquery

The example in this article describes the method of using jquery to implement the input numerical increment and decrement. Share to everyone for your reference. The specific analysis is as follows:

In many electric business website, in the shopping cart on the page, involves the quantity of goods, will provide a + Number button and-number button to achieve 1 and minus 1, and only allow input values. Bootstrap Touchspin This plugin is written for this requirement. (Bootstrap touchspin This plugin click here to download this website.) ）

First introduce the necessary CSS and JS files.

Copy Code code as follows:

<link href= "Bootstrap/css/bootstrap.min.css" rel= "stylesheet"/>
<link href= "Css/jquery.bootstrap-touchspin.min.css" rel= "stylesheet"/>
<script src= "Scripts/jquery-2.1.3.min.js" ></script>
<script src= "Bootstrap/js/bootstrap.min.js" ></script>
<script src= "Scripts/jquery.bootstrap-touchspin.min.js" ></script>

The precision of the control numerical value and the self reducing quantity

Copy Code code as follows:

<br/>
<div style= "margin-left:10px;" >
<form class= "form-horizontal" role= "form" >
<div class= "Form-group" >
<div class= "Col-xs-2" >
<input id= "Demo1" type= "value=" name= "Demo1" class= "Form-control"/>
</div>
</div>
</form>
</div>
<script type= "Text/javascript" >
$ (function () {
$ ("Input[name= ' Demo1 ']"). Touchspin ({
min:0,
MAX:100,
step:0.1,//Increment or decrement
Decimals:2,//precision
Boostat:5,
Maxboostedstep:10,
Postfix: '% '//suffix
});
});
</script>

Click the + Number button to increase your own 0.1
Click the-Number button to subtract 0.1
Keep 2-digit decimal point
Minimum allowable value 0.00
Maximum allowable value 100.00
Only allow values to be entered, otherwise lose focus display minimum 0.00

Second, only allow starting from 1 integers, which is also the shopping cart page common practice

Copy Code code as follows:

<div style= "margin-left:10px;" >
<form class= "form-horizontal" role= "form" >
<div class= "Form-group" >
<div class= "Col-xs-2" >
<input id= "Demo2" type= "text" value= "1" name= "Demo2" class= "Form-control"/>
</div>
</div>
</form>
</div>
<script type= "Text/javascript" >
$ (function () {
$ ("Input[name= ' Demo2 ']"). Touchspin ({
Min:1,
MAX:100,
step:1//Increment or decrement
});
});
</script>

Click the + Number button to increase your own 1
Click the-Number button to subtract 1
Minimum allowable value 1
Maximum allowable value 100
Only allow values to be entered, otherwise lose focus display minimum 1

For other uses, interested friends can refer to the relevant documentation.

I hope this article will help you with your jquery programming.