Angular输入框限制：非数字及超最大值输入拦截问题的解决与分析

1. 如何解决最大值限制失效的问题？ #

直接修改输入框的值是最有效的方式，无需依赖event.stopPropagation()（它无法阻止输入框值更新）。以下是修正后的代码：

onInputChange(event) {
  const initialValue = event.target.value;
  // 过滤所有非数字字符
  let processedValue = initialValue.replace(/[^0-9]/g, '');
  
  // 转换为数字并判断是否超出最大值
  const numericValue = parseInt(processedValue, 10);
  if (!isNaN(numericValue) && numericValue > this.maxValue) {
    // 超出时将值设置为最大值
    processedValue = this.maxValue.toString();
  }
  
  // 更新输入框的最终值
  event.target.value = processedValue;
}

核心逻辑：

• 先完成非数字过滤，得到纯数字字符串
• 将纯数字字符串转为数值，与maxValue做比较
• 若超出最大值，直接将输入框的值设置为maxValue的字符串形式
• 通过直接修改event.target.value，确保输入框实时显示符合要求的内容

2. 为何非数字校验功能正常，而最大值校验功能失效？ #

非数字校验生效的原因 #

代码中通过initialValue.replace(/[^0-9]*/g, '')过滤掉非数字字符后，直接将处理结果赋值给event.target.value，输入框会立刻更新为纯数字内容，用户输入的非数字字符会被实时清除，因此功能正常。

最大值校验失效的原因 #

原代码存在两个关键问题：

• event.stopPropagation()的作用是阻止事件向上冒泡到父元素，根本无法阻止输入框本身的值更新，输入的超出值依然会保留在输入框中。
• 代码仅做了条件判断和事件阻止，没有对输入框的value进行修正，所以即使判断出值超出最大值，也没有改变输入框的显示内容，导致限制逻辑失效。

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