如何设置input[type=number]页面加载时最小值为初始值并禁止向下递减

我来帮你搞定这个数字输入框的限制问题！你之前的代码之所以出问题，是因为onchange事件要等到值改变后才触发，还会动态把min改成当前值——这就导致了两个麻烦：第一次点向下箭头时min还没更新，所以能减一次；递增后min被设成更大的数，自然没法回到初始值。

下面给你两种可行的解决方案，按需选择：

方案a：禁止递减至低于初始值（推荐） #

这种方法既保留箭头交互，又严格限制输入值不能低于初始值，还允许用户递减回初始值。

核心思路是一开始就把min属性固定为初始值，然后用input事件实时检查输入值，一旦小于min就自动重置为初始值：

<div class="form-row">
  <label for="SOA_Serial" class="col-sm-2 col-form-label" style="max-width:150px;">Serial: </label>
  <input type="number" id="serial_input" class="form-control" name="SOA_Serial" style="width:330px;" 
         value="<?php echo escape($SOA_array[2]);?>" 
         min="<?php echo escape($SOA_array[2]);?>"
         oninput="if(Number(this.value) < Number(this.min)) this.value = this.min;">
</div>

为什么这个能解决问题？ #

• 初始化时min就固定为初始值，不会随输入变化而改变，所以用户可以自由递减回初始值
• input事件会在输入（包括点击箭头、手动输入）的瞬间触发，立刻修正不符合要求的值，彻底杜绝低于初始值的情况

方案b：完全禁用向下箭头 #

如果你想彻底隐藏向下箭头，同时限制输入，可以结合CSS和JS实现：

首先用CSS隐藏数字输入框的箭头：

/* 隐藏Chrome/Safari/Edge的箭头 */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 隐藏Firefox的箭头 */
input[type=number] {
  -moz-appearance: textfield;
}

然后再加上方案a中的min属性和input事件限制，这样既看不到向下箭头，也不能手动输入小于初始值的数字。

注意事项 #

• 单纯用CSS隐藏箭头不够，必须结合min和JS限制，因为用户还是可以通过键盘输入更小的数字
• 如果只想隐藏向下箭头而保留向上箭头，CSS实现起来兼容性很差，所以一般推荐直接隐藏所有箭头+JS限制的组合

内容的提问来源于stack exchange，提问作者DevOpsSauce