Html 限制数字类型输入中的字符数

我使用的是带有反应形式的角材料，其中我有一个类型为number的输入字段。我想将用户可以在文本框中输入的值限制在1到99之间。我能够实现这一点，但我在键启动后几秒钟内看到值，然后值被切片，因为我已经在键启动事件中写入了切片逻辑。我试着用键盘写下这个逻辑，但似乎不起作用。我尝试使用event.stopPropogation（）和preventDefault，但没有成功。代码如下：

<input type="number"
          matInput
          min="1"
          max="99"
          #tempVar
          autocomplete="off"
          formControlName="noOfWeeks"
          (keyup)="imposeMinMax(tempVar)"
          (keypress)="numericOnly($event)"
        />

TS文件

  numericOnly(e): boolean {
   return e.keyCode === 8 && e.keyCode === 46 
   ? true
   : !isNaN(Number(e.key));
  }

  imposeMinMax(el) {
      if (
        el.value != '' &&
        (parseInt(el.value) < parseInt(el.min) ||
          parseInt(el.value) > parseInt(el.max))
      ) {
          el.value = el.value.toString().slice(0, 2);
        }
      }

numericOnly（e）：布尔值{
返回e.keyCode==8&&e.keyCode==46
真的吗
：！isNaN（数字（e.key））；
}
最大值（el）{
如果(
el.value！=''&&
（parseInt（el.value）parseInt（el.max））
) {
el.value=el.value.toString（）.slice（0,2）；
}
}

我可以建议一种方法，利用

键控事件：

    <input type="number"
              matInput
              min="1"
              max="99"
              #tempVar
              autocomplete="off"
              formControlName="noOfWeeks"
              (keydown)="handleKeydown($event)"
            />



handleKeyDown（e）{
const typedValue=e.keyCode；
如果（类型值<48和类型值>57）{
//如果该值不是数字，我们将跳过最小/最大比较
返回；
}
const typedNumber=parseInt（e.key）；
const min=parseInt（e.target.min）；
const max=parseInt（e.target.max）；
const currentVal=parseInt（e.target.value）| |“”；
const newVal=parseInt（typedNumber.toString（）+currentVal.toString（））；
如果（新值<最小值|新值>最大值）{
e、 预防默认值（）；
e、 停止传播（）；
}
}

当然，此
handleKeyDown
方法可以进一步扩展，具体取决于您的需求。
keypress:已弃用此功能不再推荐。尽管某些浏览器可能仍然支持它，但它可能已经从相关的web标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用，并尽可能更新现有代码；请参阅本页底部的兼容性表以指导您的决策。请注意，此功能可能随时停止工作。你可以创建一个指令，这是一个更好的方法
handleKeyDown(e) {
    const typedValue = e.keyCode;
    if (typedValue < 48 && typedValue > 57) {
      // If the value is not a number, we skip the min/max comparison 
      return;
    }

    const typedNumber = parseInt(e.key);
    const min = parseInt(e.target.min);
    const max = parseInt(e.target.max);
    const currentVal = parseInt(e.target.value) || '';
    const newVal = parseInt(typedNumber.toString() + currentVal.toString());

    if (newVal < min || newVal > max) {
      e.preventDefault();
      e.stopPropagation();
    }
  }