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

【问题标题】：Input type number max value not working输入类型编号最大值不起作用
【发布时间】：2016-05-23 15:39:27
【问题描述】：

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

我不知道如何从包含 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>

【问题讨论】：

有一个叫@JohnSlegers 的白痴编辑所有帖子和答案，也许是为了增加徽章。我回滚所有版本。
@MarcosPérezGude：我一直在提高这个问题和其他各种问题的可读性、缩进和间距。为什么这是一件坏事？这怎么让我成为一个白痴，到底是什么？！不，我这样做不是为了“徽章”……我想你可以称我为“可读性纳粹”（没有更好的术语）。

标签： jquery html

【解决方案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>

【讨论】：

【解决方案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;    
      }
 });

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：