javascript - 如何在Angular 4中进行onkeypress

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

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

<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, '');
  }
}

最佳答案

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以外的其他字符。

祝好运!

关于javascript - 如何在Angular 4中进行onkeypress，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46939808/

onKeyPress

javascript - 如何在Angular 4中进行onkeypress