加加减减

<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)
                }
            }
        });
    原文作者:代码碎片
    原文地址: https://segmentfault.com/a/1190000000687126
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞