Question

我有一个HTML文本框。如何在keypress事件中仅允许其中的数字？有一个type=number但是我使用了类型文本。

Answer 1

您可以在文本输入中使用“按键”事件。您可以使用此功能。

<input id="example" type="text" [(ngModel)]="example" (keypress)="OnlyNumbers($event)" />

public OnlyNumbers($event) {
let regex: RegExp = new RegExp(/^[0-9]{1,}$/g);
let specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowRight','ArrowLeft'];enter code here
if (specialKeys.indexOf($event.key) !== -1) {
  return;
} else {
  if (regex.test($event.key)) {
    return true;
  } else {
    return false;
  }
}
}

Answer 2

您可以在组件中使用Reactive Forms，并且只允许输入字段中的数字使用Validators.pattern("^\\d+$")（如minlength），所需的验证将以此形式处理。

Answer 3

HTML：

<input type="text" (input)="onTextboxChangeValidate($event)">

TS文件包含以下功能

onTextboxChangeValidate(event: Event)
{
var inputData = (<HTMLInputElement>event.target).value;

//replace more than one dot
var extractedFte = inputData.replace(/[^0-9.]/g, '').replace('.', '')
  .replace(/\./g, '').replace('x', '.');

//Extract nuber Values
extractedFte = extractedFte.replace(/^(\d+)\d*$/, "$1");

//Reasign to same control
(<HTMLInputElement>event.target).value = extractedFte; 
}

如何使用TypeScript仅允许html输入类型文本中的数字？

3 个答案: