使用jQuery增加和减少输入值的方法

本文描述了使用jQuery增加和减少输入值的方法。分享给大家参考。具体分析如下：

在很多电商网站中，购物车页面涉及商品数量时，会提供#按钮和-按钮增减1，输入时只允许输入数值。Bootstrap TouchSpin是为满足这一需求而编写的插件。(Bootstrap TouchSpin这个插件可以在这里下载。)

首先，介绍必要的css和js文件。复制的代码如下： link href=' bootstrap/CSS/bootstrap . min . CSS ' rel='样式表'/link href=' CSS/jquery . bootstrap-touch pin . min . CSS ' rel='样式表'/脚本src=' http : scripts/jquery-2 . 1 . 3 . min . js '/脚本src=' http : bootstrap/js/bootstrap . min . js '/脚本src=' http :s '

一、控制数值的精度，自增自减复制码的代码如下： br/div style=' margin-left : 10px；'form class='form-horizontal '角色=' form ' div class=' form-group ' div class=' col-xs-2 '输入id=' demo 1 ' type=' text ' value=' 55 ' name=' demo 1 ' class=' form-control '/div/div/form/div script type=' text/JavaScript ' $(function(){ $(' input[name=' demo 1 ']')。touch pin({ min : 0，max: 100，Step: 0.1，//递增或递减decimals: 2，//在3360 5时的精度提升，maxboostedstep 3360 10，后缀：“%”//后缀})；});/script

点击#按钮增加0.1点击-按钮减少0.1保留2个小数点允许最小值为0.00允许最大值为100.00只输入值，否则会失去焦点，显示最小值为0.00。

第二，只允许从1开始的整数，这也是购物车页面的常见做法。复制代码如下： div style=' margin-left : 10px；'form class=' form-horizontal ' role=' form ' div class=' form-group ' div class=' col-xs-2 '输入id=' demo 2 ' type=' text ' value=' 1 ' name=' demo 2 ' class=' form-c Control '/div/div/form/div脚本类型=' text/JavaScript ' $(function(){ $(' input[name=' demo 2 ']')。touch pin({ min : 1，max: 100，step : 1//递增或递减。});/script

点击#按钮增加1点击-按钮减少1允许最小值1允许最大值100只输入值，否则会失去焦点，显示最小值1。

其他用法，感兴趣的朋友可以参考相关文献。

希望本文对大家的jQuery程序设计有所帮助。