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

朴灿烈づ我的快乐病毒、 2021-11-22 10:34 309阅读 0赞

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

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

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

<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    
    <script type="text/javascript" src="js/layer/layer.js"></script>

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

隐藏按钮就将两个按钮的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。

自增一的方法就简单了，因为上面的方法已经验证了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);
    	}
    }

[20190724195509584.gif]: /images/20211122/12d30f67a35541c2b44bc4fcfa498b08.png