jquery实现对文本框数值增减
具体要实现的功能就是,在商品的详情页面,对商品的数量进行增减操作,再进行购买。原本的代码因为限制太少,而且甚至可以减成负数,所以需要优化增强。那么基本要实现的就是,数量不能为空,不能是非数字,不能是负数,主要使用的jquery事件是click点击事件和blur失去焦点事件,本来用的是纯js,结果似乎在引入jquery的网页中,纯js的一些方法失效了,具体原因没有分析。
此教程为记录,可能还可以精简,另外需要引入jquery.
文章部分参考csdn博客,齐子生文章。
js代码如下:
<script type="text/javascript">
$(function () {
//获得文本框对象
var input = $(".good_nums");
//数量增加操作
$("#good_num_jia").click(function () {
if (input.val() <= 0) {
input.val("0");
}
input.val(parseInt(input.val()) + 1);
//数字大于等于一,解除减少按钮的disabled状态
if (input.val() >= 1) {
$("#good_num_jian").attr("disabled", false);
}
});
//文本框失去焦点操作
$(".good_nums").blur(function () {
//访问者自己输入的值小于0,则强制为0
if (input.val() <= 0) {
input.val("0");
}
//如果访问者输入的值不是数字,则强制为0
//isNaN()是否为非法数字
if (isNaN(input.val())) {
input.val("0");
}
//如果访问者清空了原本的值,则强制为0
if (input.val() == "") {
input.val("0");
}
});
//数量减少操作
$("#good_num_jian").click(function () {
if (input.val() <= 0) {
input.val("0");
}
input.val(parseInt(input.val()) - 1);
//数字小于一,使减少按钮变为disabled状态
if (input.val() < 1) {
$("#good_num_jian").attr("disabled", true);
}
});
});
</script>
html代码如下:
<input type="button" value="-" class="good_num_jian" id="good_num_jian"/>
<input type="text" value="1" id="good_nums" class="good_nums" />
<input type="button" value="+" id="good_num_jia" class="good_num_jia" />
我还加了点css样式:
<style type="text/css">
font {
font-weight: bold;
font-style: italic;
}
#good_num_jian, #good_num_jia {
width: 20px;
height: 20px;
border: none;
color: #fff;
background: #14a5c0;
font-size:15px;
font-weight:bold;
border-radius:10px;
margin:0 5px;
}
.good_nums{
width:20px;
text-align:center;
border: none;
color:#14a5c0;
font-size:18px;
font-weight:bold;
}
</style>
具体效果如下图: