jQuery控制number类型输入框最小值时键盘输入异常问题

问题现象 #

设置type为number的输入框最小值为5，通过按钮增减数值功能正常，但手动输入时出现异常：删除原有5后输入8，输入框显示58而非8；输入13则显示513。

问题原因 #

原代码绑定了mouseup和keydown事件，在keydown阶段输入框的内容还未完成更新（比如删除5后，keydown触发时输入框值仍为5），此时执行Math.max(5, $(this).val())会把值强制设回5，后续输入的字符就会追加在5后面，导致拼接出错误的数值。另外，$(this).val()返回的是字符串类型，直接参与数学运算可能出现非预期结果。

解决方案 #

1. 更换事件为input，该事件会在输入框内容实际更新后触发，能准确获取当前输入值。
2. 将输入值转换为数字类型，避免字符串拼接问题。
3. 处理空值情况，当用户清空输入框时自动设为最小值。

修正后的代码 #

JavaScript

$('input[type=number].cart__product-qty').on('input mouseup', function() {
  let currentVal = Number($(this).val());
  // 处理空值或非数字情况
  if (isNaN(currentVal)) {
    currentVal = 0;
  }
  const minVal = 5;
  const maxVal = 10000;
  $(this).val(Math.min(maxVal, Math.max(minVal, currentVal)));
});

// 阻止非提交按钮触发表单提交
$('form').on('click', 'button:not([type="submit"])', function(e) {
  e.preventDefault();
});

CSS

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

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

.number-input {
  border: 2px solid #ddd;
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 1rem;
  height: 2px;
  background-color: #212121;
  transform: translate(-50%, -50%);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  font-family: sans-serif;
  max-width: 5rem;
  padding: .5rem;
  border: solid #ddd;
  border-width: 0 2px;
  font-size: 2rem;
  height: 3rem;
  font-weight: bold;
  text-align: center;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="number-input">
    <button onclick="this.parentNode.querySelector('input[type=number].cart__product-qty').stepDown()"></button>
    <input type="number" class="cart__product-qty" value="5" min="5">
    <button onclick="this.parentNode.querySelector('input[type=number].cart__product-qty').stepUp()" class="plus"></button>
  </div>
</form>

额外说明 #

• input事件覆盖了键盘输入、粘贴等所有内容变更场景，比keydown更适合实时校验。
• 转换为数字并判断isNaN，避免用户输入非数字内容时出现错误。
• 保留mouseup事件以支持按钮增减后的数值校验，确保按钮操作也符合最值限制。

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