輸入類型數字最大值不起作用

Question

我有一個輸入類型數字元素具有最小值和最大值。防止默認功能我已將其定製爲使用單獨的輸入。

我不知道如何從包含最小和最大屬性的輸入元素觸發最大值。雖然我給了最大範圍的加值和十字值。

$('.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

你剛剛把一個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 3

事實上的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 4

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 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>