输入类型编号最大值不起作用

Question

我有一个带有最小值和最大值的输入类型数字元素。 防止使用默认功能我已将其自定义为与单独的输入配合使用。

我不知道如何从包含min和max属性的输入元素中触发最大值。 尽管我给出最大范围，但加号却超过了值。

 $('.plus').on('click', function(e) { var val = parseInt($(this).prev('input').val()); $(this).prev('input').attr('value', val + 1); }); $('.minus').on('click', function(e) { var val = parseInt($(this).next('input').val()); if (val !== 0) { $(this).next('input').attr('value', val - 1); } }); 

 body { background-color:#eeeeee; margin: 40px; } .minus, .plus { border: none; padding: 10px; width: 40px; font-size: 16px; } input[type=number].quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity { padding: 10px; border: none; width: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="quantity-block"> <input class="minus" type="button" value="-"> <input type="number" value="1" class="quantity" size="4" min="1" max="5"/> <input class="plus" type="button" value="+"> </div> 

Answer 1

您可以读取max属性，然后在条件中使用它：

 $('.plus').on('click', function(e) { var val = parseInt($(this).prev('input').val()); var max = parseInt($(this).prev('input').attr('max')); if(val < max) { $(this).prev('input').attr('value', val + 1); } }); $('.minus').on('click', function(e) { var val = parseInt($(this).next('input').val()); if (val !== 0) { $(this).next('input').attr('value', val - 1); } }); 

 body { background-color:#eeeeee; margin: 40px; } .minus, .plus { border: none; padding: 10px; width: 40px; font-size: 16px; } input[type=number].quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity { padding: 10px; border: none; width: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="quantity-block"> <input class="minus" type="button" value="-"> <input type="number" value="1" class="quantity" size="4" min="1" max="5"/> <input class="plus" type="button" value="+"> </div> 

Answer 2

Javascript独立于HTML5验证。 因此，您可以从jquery中获取最大值和最小值，并将最大值和最小值设置为js。 喜欢 ：

 $('.plus').on('click', function(e) {
    var val = parseInt($(this).prev('input').val());
    var max = parseInt($(this).prev('input').attr('max'));
    if(val == max) {
        return;
    }
    $(this).prev('input').val(val + 1);

});

 $('.minus').on('click', function(e) {
    var val = parseInt($(this).next('input').val());
    var min = $(this).prev('input').attr("min");
   if (val == min) {
      return;
   }
    $(this).next('input').val(val - 1);

 });

 // to prevent when user directly type to the textbox

 $(".quantity").keydown(function(){
      var val = $(this).val();
      var min = $(this).attr("min");
      var max = $(this).attr("max");
      if(val > max || val < min){
          $(this).val("");
          return false;    
      }
 });

Answer 3

您只需要设置一个if条件，

 $('.plus').on('click', function(e) { var val = parseInt($(this).prev('input').val()); if (val < $(this).prev('input').attr('max')) { $(this).prev('input').attr('value', val + 1); } }); $('.minus').on('click', function(e) { var val = parseInt($(this).next('input').val()); if (val !== 0) { $(this).next('input').attr('value', val - 1); } }); 

 body { background-color:#eeeeee; margin: 40px; } .minus, .plus { border: none; padding: 10px; width: 40px; font-size: 16px; } input[type=number].quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity { padding: 10px; border: none; width: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="quantity-block"> <input class="minus" type="button" value="-"> <input type="number" value="1" class="quantity" size="4" min="1" max="5"/> <input class="plus" type="button" value="+"> </div> 

Answer 4

实际上， input[type=number]的min/max属性有效，但仅使用箭头键有效，对于+/-按钮单击，最好具有一些如下所示的条件：

 $('.plus').on('click', function(e) { var val = parseInt($(this).prev('input').val()); if (val != $(this).prev('input').attr('max')) { // check the value against max attribute $(this).prev('input').attr('value', val + 1); } }); $('.minus').on('click', function(e) { var val = parseInt($(this).next('input').val()); if (val != $(this).next('input').attr('min')) {// check the value against min attribute $(this).next('input').attr('value', val - 1); } }); 

 body { background-color: #eeeeee; margin: 40px; } .minus, .plus { border: none; padding: 10px; width: 40px; font-size: 16px; } input[type=number].quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity { padding: 10px; border: none; width: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="quantity-block"> <input class="minus" type="button" value="-"> <input type="number" value="1" class="quantity" min="1" max="5" /> <input class="plus" type="button" value="+"> </div> 

Answer 5

学习时必须解决的一个问题变体-（使两个按钮增加或减少一个值，并且当数字达到最小值时-将其重置为最大值，反之亦然）。 考虑到您的最小/最大值，我重新调整了一下位置。 并不是说它一定很好-但这对于学习程序员来说是一个有趣的问题。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>

    <body>
        <input type = "button" value = "-1"></input>
        <input type = "text" value = "1" id="counter"  min="0" max="5"></input>
        <input type = "button" value = "+1"></input>

        <script>
            $(":button").click(function() {
                var result = parseFloat($("#counter").val())+parseFloat(($(this).val()));
                if(result>$("#counter").attr('max')){result=1}else{if(result==$("#counter").attr('min')){result=5}};
                $('#counter').val(result);
            });
        </script>
    </body>
</html>