如何阻止input type number输入无效值并恢复上次有效值？

问题分析 #

你的代码没生效的核心原因有两个：

1. change 事件触发时机太晚——它要等输入框失去焦点或用户确认输入后才会执行，这时候无效内容已经输入完成，event.preventDefault() 根本拦不住输入行为。
2. 就算检测到值是 NaN，你也没有编写恢复上一次有效值的逻辑，只是直接返回，输入框里的无效内容依然会保留。

另外，仅靠 parseFloat 判断 NaN 不够精准，我们可以直接用正则校验输入格式，确保只允许单个负号开头，后续跟合法数字（包括小数）。

解决方案 #

1. 保存上一次有效数值 #

在组件里声明一个变量，专门存储输入框的上一次有效值，初始值可以根据需求设置（比如空字符串、0或输入框默认值）。

2. 改用input事件监听输入 #

input 事件会在用户每一次输入时实时触发，能及时拦截无效内容，比 change 事件更适合做实时校验。

3. 校验格式并恢复有效值 #

用正则表达式 /^-?\d*\.?\d*$/ 校验输入内容：

• ^ 匹配字符串开头
• -? 允许可选的单个负号
• \d* 匹配零个或多个整数位数字
• \.? 允许可选的小数点
• \d* 匹配零个或多个小数位数字
• $ 匹配字符串结尾

当输入内容不符合规则时，直接把输入框的值恢复为上一次的有效值；符合规则时，更新存储的有效值。

完整代码示例 #

模板部分：

<input type="number" id="quantity" name="quantity" (input)="firstRangePointChanged($event)">

组件逻辑部分：

// 存储上一次有效输入值，初始值按需设置
lastValidQuantity: number | string = '';

firstRangePointChanged(event: Event) {
  const input = event.target as HTMLInputElement;
  const currentValue = input.value;
  
  // 校验输入格式：允许空、单个负号、合法数字（整数/小数）
  const validPattern = /^-?\d*\.?\d*$/;
  if (validPattern.test(currentValue)) {
    // 校验通过，更新有效值
    this.lastValidQuantity = currentValue;
  } else {
    // 校验不通过，恢复上一次有效值
    input.value = this.lastValidQuantity;
  }
}

补充说明 #

• 如果需要限制输入必须是完整的有效数字（不能是空或单个负号），可以把正则改成 /^-?\d+(\.\d+)?$/，这样只允许整数或带小数的数字。
• 虽然是 number 类型输入框，浏览器会自动过滤部分非数字字符，但连续负号属于浏览器允许的临时输入（比如用户误操作重复输入负号），所以需要手动拦截。

内容的提问来源于stack exchange，提问作者Ortal Blumenfeld Lagziel