javascript - 如何在 Angular 4 中执行 onkeypress

Question

我正在尝试实现一个只允许输入数字的输入标签。

我找到工作的一种方式如下

<input name="num" 
   type="number"
   pattern="[0-9]*" 
   placeholder="Enter new PIN" 
   onkeypress="return event.charCode >= 48 && event.charCode <= 57"
   title="Numbers only">

但我想将 onkeypress 更改为 Angular 函数。有没有类似的东西？

我已经尝试了 (keyup) 和 (change) 但两者的工作方式都不一样。他们允许按下键然后删除数字。

<input (keyup)="checkPin($event)" 
  type="number" 
  pattern="[0-9]*" 
  placeholder="Enter new PIN" 
  inputmode="numeric" 
  style="-webkit-text-security: disc;"></input>

这里是TS函数checkPin

checkPin($event: KeyboardEvent) {
  console.log($event)
  let value = (<HTMLInputElement>event.target).value;

  if ($event.target) {
    if (value == "") {
      value = value.slice(0, 0);
    }

    if (value.length > 4) {
      value = value.slice(0, 4)
    }
    (<HTMLInputElement>event.target).value = value.replace(/\D/g, '');
  }
}

Answer 1

TS 方法:

keyPress(event: KeyboardEvent) {
    const pattern = /[0-9]/;
    const inputChar = String.fromCharCode(event.charCode);
    if (!pattern.test(inputChar)) {
        // invalid character, prevent input
        event.preventDefault();
    }
}

HTML:

<input (keypress)="keyPress($event)" 
    type="number" 
    pattern="[0-9]*" 
    placeholder="Enter new PIN" 
    inputmode="numeric" 
    style="-webkit-text-security: disc;"></input>

这里不需要 html 中的模式，因为您只能输入 0-9 之外的其他字符。

祝你好运!