限制输入类型号的字符数答案

【问题标题】：Limit the number of characters in input of type number限制输入类型号的字符数
【发布时间】：2020-11-24 07:18:26
【问题描述】：

我正在使用具有反应形式的角材料，其中我有一个数字类型的输入字段。我想将用户可以在文本框中输入的值限制在 1 到 99 之间。我能够做到这一点，但我在按键后的几秒钟内看到了该值，然后在我编写切片逻辑时对该值进行切片在 keyup 事件中。我尝试在按键中编写此逻辑，但似乎不起作用。我尝试使用 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);
        }
      }

【问题讨论】：

keypress：已弃用不再推荐使用此功能。尽管某些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅本页底部的兼容性表以指导您的决定。请注意，此功能可能随时停止工作。 developer.mozilla.org/en-US/docs/Web/API/Document/…
你可以创建一个指令，会是一个更好的方法

标签： html angular

【解决方案1】：

我可以建议一种利用keydown 事件的方法：

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

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();
    }
  }

当然，这个handleKeyDown 方法可以进一步扩展，具体取决于您的要求。

【讨论】：