加加减减

<div class="sl">
    <div>数量</div>
    <div>-</div>
    <input type="number" value="1" min='1' max='99' class="activate" onpaste="return false">
    <div>+</div>
</div>
.sl{
    position: relative;
    border-bottom: 1px solid rgb(222,222,222);
    height: 100px;
}
.sl div{
    position: relative;
    display: inline-block;
    width: 60px;
    height: 27px;
    line-height: 27px;
    text-align: center;
}
.sl div:nth-child(1){
    margin: 15px 0 0 0;
    font-size: 13px;
    border: 0;
}
.sl div:nth-child(2){
    border-right: none;
    top: 40px;
    left: -45px;
    color: #00aaff;
    background: white;
}
.sl input{
    position: relative;
    border: none;
    border-radius: 0; 
    width: 60px;
    height: 27px;
    top: 38px;
    left: -48px;
    text-align: center;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sl div:nth-child(4){
    border-left: none;
    top: 40px;
    left: -51px;
    color: #00aaff;
    background: white;
}
        $(".sl div:nth-child(4)").on("tap",function(){
            if($(".sl input").val()!=""){
                var val=parseInt($(".sl input").val());
            }else{
                $(".sl input").val("1");
                return;
            }
            if(val>=99){
                return;
            }else{
                val=val+1;  
            }
            $(".sl input").val(val);
        });
        $(".sl div:nth-child(2)").on("tap",function(){
            var val=parseInt($(".sl input").val());
            if(val<=1){
                return
            }else{
                val=val-1;
                $(".sl input").val(val);
            }
        });
        $(".sl input").on("keydown",function(e){
            if(e.keyCode<=48||e.keyCode>57){
                if(e.keyCode==8){
                    return;
                }else if(e.keyCode==48){
                    if($(this).val()==""||$(this).val().length==0){
                        e.preventDefault();
                        return false;
                    }
                }else{
                    e.preventDefault();
                    return false;
                }
            }
        });
        $(".sl input").on("keyup",function(e){
            if(e.keyCode<=48||e.keyCode>57){
                if(e.keyCode==8){
                    return;
                }else{
                    e.preventDefault();
                    return false;
                }
            }else{
                if($(this).val().length<=2){
                    return;
                }else{
                    $(this).val(99)
                }
            }
        });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值