美文网首页
jquery实现input数字加减只允许输入数字

jquery实现input数字加减只允许输入数字

作者: EverglowLyu | 来源:发表于2021-01-12 13:41 被阅读0次
input.jpg
<div class="forNumber">
    <input type="text" name='arithmeticN' value="0" class="numInput" onkeyup="this.value=this.value.replace(/\D/g,'')" min='0'>
    <div class="arithmetic">
        <div class="chevron arithmeticAddBox">
            <i class="arithmeticAdd"></i>
        </div>
        <div class="chevron arithmeticMinusBox">
            <i class="arithmeticMinus"></i>
        </div>
    </div>
</div>
.forNumber {
width: 88px;
height: 32px;
background: #ffffff;
border: 1px solid #d9d9d9;
opacity: 1;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
}
.numInput {
width: 67px;
text-indent: 5px;
}
.arithmetic {
width: 21px;
height: 32px;
border-left: 1px solid #d9d9d9;
}
.arithmeticAdd,
.arithmeticMinus {
width: 9px;
height: 6px;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.arithmeticAddBox {
width: 20px;
height: 16px;
position: relative;
border-bottom: 1px solid #d9d9d9;
cursor: pointer;
}
.arithmeticMinusBox {
width: 20px;
height: 16px;
position: relative;
cursor: pointer;
}

.arithmeticAdd {
background: url(../../images/settings_images.png) 0px -185px no-repeat;
}
.arithmeticAddBox:hover .arithmeticAdd {
background: url(../../images/settings_images.png) -17px -185px no-repeat;
}
.arithmeticMinus {
background: url(../../images/settings_images.png) -35px -185px no-repeat;
}
.arithmeticMinusBox:hover .arithmeticMinus {
background: url(../../images/settings_images.png) -52px -185px no-repeat;
}

//加减
$('.chevron').click(function () {
    var sinput = $(this).parents('.arithmetic').prev('.numInput');
    if ($(this).hasClass('arithmeticAddBox')) {
        sinput.val(parseInt(sinput.val()) + 1);
    } else {
        if (parseInt(sinput.val()) < 1) { return } sinput.val(parseInt(sinput.val()) - 1);
    }
});

相关文章

网友评论

      本文标题:jquery实现input数字加减只允许输入数字

      本文链接:https://www.haomeiwen.com/subject/ibnsaktx.html