Javascript 忽略<；输入类型="；“数字”/&燃气轮机；在HTML5中

我曾在chrome、opera和Microsoft edge中测试过它，但除了值和名称之外，其他属性仍然被忽略

<input type="number" class="input-number" min="1" max="10" maxlength="2" step="1" value="<?php echo $_SESSION['cart'][$row['id']]['quantity']; ?>" name="quantity[<?php echo $row['id']; ?>]" />

---

最后，我得到了答案。这是最后的代码

---

HTML代码

<div class="quantity ml-auto">
<div class="input-group input-number-group">
  <div class="input-group-button">
    <span class="input-number-decrement">-</span>
  </div>
  <input type="number" class="input-number" min="1" max="10" maxlength="2" step="1" value="<?php echo $_SESSION['cart'][$row['id']]['quantity']; ?>" name="quantity[<?php echo $row['id']; ?>]" />
  <div class="input-group-button">
    <span class="input-number-increment">+</span>
  </div>
</div>
</div>

---

定稿

<script>
    $(document).ready(function () {
  
  jQuery('.quantity').each(function () {
    var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.input-number-increment'),
        btnDown = spinner.find('.input-number-decrement'),
        min = input.attr('min'),
        max = input.attr('max');

    btnUp.click(function () {
      var oldValue = parseFloat(input.val());
      if (oldValue >= max) {
        var newVal = oldValue;
      } else {
        var newVal = oldValue + 1;
      }
      spinner.find("input").val(newVal);
      spinner.find("input").trigger("change");
    });

    btnDown.click(function () {
      var oldValue = parseFloat(input.val());
      if (oldValue <= min) {
        var newVal = oldValue;
      } else {
        var newVal = oldValue - 1;
      }
      spinner.find("input").val(newVal);
      spinner.find("input").trigger("change");
    });

  });
});
</script>

$（文档）.ready（函数（）{
jQuery（'.quantity'）。每个（函数（）{
var spinner=jQuery（this），
input=spinner.find（'input[type=“number”]”），
btnUp=spinner.find（'.input number increment'），
btnDown=spinner.find（'.input number decrement'），
min=input.attr（'min'），
max=input.attr（'max'）；
btnUp.click（函数（）{
var oldValue=parseFloat（input.val（））；
如果（旧值>=最大值）{
var newVal=旧值；
}否则{
var newVal=oldValue+1；
}
spinner.find（“输入”）.val（newVal）；
微调器。查找（“输入”）。触发器（“更改”）；
});
单击（函数（）{
var oldValue=parseFloat（input.val（））；
如果（oldValue以什么方式不起作用？我猜您的递增/递减按钮可以绕过限制；如果是这样，您需要重新编写JS来处理该场景。是的，我尝试过，但找不到方法。这就是为什么我在这里添加了一个问题。您的JS代码不检查属性是否存在，只会递增值和since您可以输入无效的值-对于JS@AhmarAamir您需要检查递增/递减时的值，并根据您的限制进行检查。
<div class="quantity ml-auto">
<div class="input-group input-number-group">
  <div class="input-group-button">
    <span class="input-number-decrement">-</span>
  </div>
  <input type="number" class="input-number" min="1" max="10" maxlength="2" step="1" value="<?php echo $_SESSION['cart'][$row['id']]['quantity']; ?>" name="quantity[<?php echo $row['id']; ?>]" />
  <div class="input-group-button">
    <span class="input-number-increment">+</span>
  </div>
</div>
</div>

input-number-group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.input-number-group input[type=number]::-webkit-inner-spin-button,
.input-number-group input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.input-number-group .input-group-button {
  line-height: calc(80px/2 - 5px);
}

.input-number-group .input-number {
  width: 80px;
  padding: 0 12px;
  vertical-align: top;
  text-align: center;
  outline: none;
  display: block;
  margin: 0;
}

.input-number-group .input-number,
.input-number-group .input-number-decrement,
.input-number-group .input-number-increment {
  border: 1px solid #cacaca;
  height: 40px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 0;
}

.input-number-group .input-number-decrement,
.input-number-group .input-number-increment {
  display: inline-block;
  width: 40px;
  background: #e6e6e6;
  color: #0a0a0a;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 400;
}

.input-number-group .input-number-decrement {
  margin-right: 0.3rem;
}

.input-number-group .input-number-increment {
  margin-left: 0.3rem;
}

<script>
    $(document).ready(function () {
  
  jQuery('.quantity').each(function () {
    var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.input-number-increment'),
        btnDown = spinner.find('.input-number-decrement'),
        min = input.attr('min'),
        max = input.attr('max');

    btnUp.click(function () {
      var oldValue = parseFloat(input.val());
      if (oldValue >= max) {
        var newVal = oldValue;
      } else {
        var newVal = oldValue + 1;
      }
      spinner.find("input").val(newVal);
      spinner.find("input").trigger("change");
    });

    btnDown.click(function () {
      var oldValue = parseFloat(input.val());
      if (oldValue <= min) {
        var newVal = oldValue;
      } else {
        var newVal = oldValue - 1;
      }
      spinner.find("input").val(newVal);
      spinner.find("input").trigger("change");
    });

  });
});
</script>