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以获得角度函数。有什么可以起作用的吗？

我尝试了(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: any) {
     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以外的其他字符。

祝你好运！

Answer 2

对于其他寻求确定是否按下特定键（例如空格键）的人，您可以使用：

grabText(event){
    if(event.code === 'Space'){
        console.log('PRESSED SPACE');
        ...  
    }

}

Answer 3

要仅输入输入字段号，可以执行此操作。因此，您可以将onkeypress用于其他功能。

 <input type="text"
    onkeydown="javascript: return event.keyCode === 8 || 
                                  event.keyCode === 46 ?
                                  true : !isNaN(Number(event.key))"/>

如何做角度4的onkeypress

3 个答案: