文本框数字自增一和自减一

文本框数字自增一和自减一

效果图：

首先，肯定是需要一个input标签，我在该标签上定义一个onmousemove事件（在鼠标指针移动到元素上时触发）和onmouseout事件（在鼠标指针移动到元素外时触发）用来显示和隐藏自增一、自减一按钮，并且定义了onkeyup事件（释放键盘按钮时执行）限制输入的值只能是0-9之间，但是鼠标的右击粘贴不会执行onkeyup事件，所以又定义了一个onchange事件（内容发生改变时触发）判断输入的值，最终的html如下：

<div>
	<span class='btn btn-danger' style='display:none' onclick='jian($(this))' onmousemove='xianshi($(this))'>-</span>
	<input class='form-control' onmousemove='xianshi($(this))' onmouseout='yincang($(this))' type='text' maxlength='5' onkeyup="value=value.replace(/[^0-9]/g,'')" onchange=' verify($(this))' value="1">
	<span class='btn btn-success' style='display:none' onclick='jia($(this))' onmousemove='xianshi($(this))'>+</span>
</div>

引入jquery插件和layer提示框插件。

<!--jquery插件 -->
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<!--layer提示框插件 -->
<script type="text/javascript" src="js/layer/layer.js"></script>

显示按钮的方法中，先获取input标签的value值，然后根据值设置第一个span标签（减按钮）和第二个span标签（加按钮）的style属性。

function xianshi(e){
	var S = e.parent().find("input").val();
	if (S<=1) {
		e.parent().find("span").eq(0).attr("style","width:30px;height:30px;margin:2px 0 0 -70px;position:absolute;cursor:pointer;background-color:#ddd;border-color:#ddd");
		e.parent().find("span").eq(1).attr("style","width:30px;height:30px;margin:-32px 0 0 40px;position:absolute;cursor:pointer");
	}else if(S>=99999){
		e.parent().find("span").eq(0).attr("style","width:30px;height:30px;margin:2px 0 0 -70px;position:absolute;cursor:pointer");
		e.parent().find("span").eq(1).attr("style","width:30px;height:30px;margin:-32px 0 0 40px;position:absolute;cursor:pointer;background-color:#ddd;border-color:#ddd");
	}else{
		e.parent().find("span").eq(0).attr("style","width:30px;height:30px;margin:2px 0 0 -70px;position:absolute;cursor:pointer");
		e.parent().find("span").eq(1).attr("style","width:30px;height:30px;margin:-32px 0 0 40px;position:absolute;cursor:pointer");
	}
}

隐藏按钮就将两个按钮的style属性设为隐藏即可。

function yincang(e){
e.parent().find("span").eq(0).attr("style","display:none");
e.parent().find("span").eq(1).attr("style","display:none");
}

判断值的方法呢，就判断value值不是纯数字弹出提示框并将value值赋值为1。

function verify(e){
	var sl= e.val();
	var patrn = /^\d+$/;
	if (!patrn.exec(sl)) {
		layer.alert("请输入正确的数量！", { icon: 0, title: '提示' },function(index){
			layer.close(index);
			e.val("1");
		});
	}
}

自增一的方法就简单了，因为上面的方法已经验证了value值是数字，所以只需判断值在指定范围内就加1；注意：这里要将value值转换为整数类型，不然实现的是拼接1。

function jia(e){
	var A = parseInt(e.parent().find("input").val());
	if (A<99999) {
		e.parent().find("input").val(A+=1);
	}
}

自减一与自增一类似。

function jian(e){
	var A = e.parent().find("input").val();
	if (A>1) {
		e.parent().find("input").val(A-=1);
	}
}