代码实现的效果点击增加、减少按钮实现购买数量的变动,只允许输入数字,禁止中文、英文或其它符号的输入。
HTML代码:
<div class="book"> <button class="sub">-</button> <input type="text" class="num text" value="100"/> <button class="add">+</button> </div>
CSS代码:
.book{overflow:hidden;}
.book button{display:block;width:50px;height:50px;background:#d9d9d9 no-repeat center center;border:none;float:left;cursor:pointer;}
.book .text{float:left;font-size:16px;color:#666;width:158px;border:1px solid #ededed;height:48px;line-height:48px;text-align:center;}
Jquery代码:
$(function(){
$('.num').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($(this).val()) || 0;
numVal = numVal < 1 ? 1 : numVal;
$(this).val(numVal);
}
}).blur(function() {
var numVal = parseInt($(this).val()) || 0;
numVal = numVal < 1 ? 1 : numVal;
$(this).val(numVal);
});
$('.book button').click(function(){
var num = parseInt($(this).parent().children('.num').val()) || 0;
if($(this).attr('class') == 'add'){
num = num + 1;
}else{
num = num - 1;
}
$(this).parent().children('.num').val(num);
});
});