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

Question

I have a HTML textbox. How to allow only numbers in it on keypress event? There is a type=number however I have use type text.

Answer 1

You can use "keypress" event in your text input. You can use this function.

---

<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

您可以在组件中使用响应式表单，并且为了仅允许输入字段中的数字，您可以使用Validators.pattern("^\\\\d+$")像 minlength，在此表单中处理所需的验证。

Answer 3

HTML:

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

TS file include below function

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