HTML加减框

最新推荐文章于 2022-02-23 15:13:49 发布

原创最新推荐文章于 2022-02-23 15:13:49 发布 · 1.2w 阅读

20 ·

CC 4.0 BY-SA版权

HTML：

<div style="width: 160px">

<input style="width: 50px; height: 38px; border: 2px white; float: left;" type="button" value="-" onclick="reductionOf(this)" /> 

<input style="text-align: center; width: 50px; height: 32px; float: left;" type="text" value="1" onblur="checkNumber(this)" /> 

<input style="width: 50px; height: 38px; border: 2px white;" type="button" value="+" onclick="add(this)" />

</div>

JS：

        //减数量
	function reductionOf(obj) {
                //减前判断
		if ($(obj).next().val() == '') {
			$(obj).next().val(1);
		}
		$(obj).next().val(parseInt($(obj).next().val()) - 1);//数值减
		$(obj).next().val($(obj).next().val());//赋值给框
	};
        //加数量
	function add(obj) {
                //加前判断
		if ($(obj).prev().val() == '') {
			$(obj).prev().val(1);
		}
		$(obj).prev().val(parseInt($(obj).prev().val()) + 1);//数值加
		$(obj).prev().val($(obj).prev().val());//赋值给框
	};
	//校验数字格式（只能输入正整数）
	function checkNumber(obj) {
		var reg = /^[1-9]\d*$/;
		if(!reg.test($(obj).val()) || $(obj).val()==''){
			$(obj).val(1);
		}
	}

效果：