最近在写购物车界面，很明显我们需要对用户输入的数量的Input输入框输入的内容进行判断。首先，必须输入数字（这样也就解决了输入负数的问题，因为减号也是不允许输入的~），然后就是数量大于1小于库存数。
H5新增的input类型也有想到，但是type=numder它虽然有数量限制，可是仅仅是点击它的加减的时候才可以生效的，手动收入时是无效的。<input type="range" name="points" min="1" max="10" />，样式是这样的：
type=range.png
显然不合适。
H5新增的type类型还有：email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color
所以，还是用type="text"来写的。
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车输入数量判断</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<b>数量：</b><input type="text" class="count" value="1"><b>库存：</b><span class="max">993</span>
</body>
<script type="text/javascript">
//购物车数量输入框数量判断
$(".count").keyup(function () {
this.value=this.value.replace(/\D/g,'');
if($(this).val() < 1) {
$(this).val(1);
}else if (Number($(this).val()) > Number($(".max").text())) {
$(this).val($(".max").text());
}
});
</script>
</html>
- 主要思想就是监听键盘keyup事件，对输入框输入的值进行正则验证，不是数字时替换为空(replace方法)。然后就是对输入的值进行判断，小于1是让它等于1，大于库存时让它等于库存。
- 由于获取到的input的value值和库存的值都是string，他们直接比较是按照unicode编码值（16进制来表示字符串）进行比较的。所以需要进行Number转换。只有当一个为数字一个为字符串时才会进行隐式转换。
做个笔记：购物车经常需要对金额去小数点后两位，可以用Number.toFixed(2)方法就可以啦！
网友评论