如何使type为text的input输入框仅接受数字输入？

方案1：通过Angular表单控件监听过滤输入 #

利用表单控件的valueChanges事件，实时过滤掉输入内容中的非数字字符，确保输入框内始终只有数字。

组件类代码：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-id-input',
  templateUrl: './id-input.component.html',
  styleUrls: ['./id-input.component.css']
})
export class IdInputComponent implements OnInit {
  idForm = new FormGroup({
    idCardInput: new FormControl('')
  });

  ngOnInit(): void {
    this.idForm.get('idCardInput')?.valueChanges.subscribe(value => {
      // 剔除所有非数字字符
      const filteredVal = value.replace(/[^0-9]/g, '');
      // 避免循环触发事件，仅在值变化时更新
      if (filteredVal !== value) {
        this.idForm.get('idCardInput')?.setValue(filteredVal, { emitEvent: false });
      }
    });
  }
}

这种方式能实时清理非数字输入，用户输入非数字时会自动被剔除，体验流畅。

方案2：监听键盘事件阻止非数字按键 #

通过keydown事件拦截非数字相关的按键，同时允许退格、删除、方向键等控制键正常使用。

修改模板代码：

<label for="idCard">ID:</label>
<input type="text" 
      class="form-control form-control-sm" 
      formControlName="idCardInput" 
      name="idCard" 
      id="idCard" 
      ng-pattern="/^[0-9]*$/"
      (keydown)="blockNonNumberKeys($event)" />

组件类添加处理方法：

blockNonNumberKeys(event: KeyboardEvent): void {
  // 允许数字键、小键盘数字键、常用控制键
  const allowedKeys = [
    '0','1','2','3','4','5','6','7','8','9',
    'Numpad0','Numpad1','Numpad2','Numpad3','Numpad4','Numpad5','Numpad6','Numpad7','Numpad8','Numpad9',
    'Backspace','Delete','ArrowLeft','ArrowRight','Tab'
  ];
  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
}

注意：这种方法无法阻止用户粘贴非数字内容，建议配合方案1的过滤逻辑一起使用。

方案3：封装自定义Angular指令复用功能 #

如果多个页面需要仅数字输入的功能，可以封装成自定义指令，方便全局复用，同时处理输入和粘贴场景。

创建指令代码：

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appOnlyNumbers]'
})
export class OnlyNumbersDirective {
  constructor(private ngControl: NgControl) {}

  @HostListener('input', ['$event']) onInput(event: InputEvent): void {
    const inputEl = event.target as HTMLInputElement;
    const filteredVal = inputEl.value.replace(/[^0-9]/g, '');
    if (filteredVal !== inputEl.value) {
      this.ngControl.control?.setValue(filteredVal, { emitEvent: false });
    }
  }

  @HostListener('paste', ['$event']) onPaste(event: ClipboardEvent): void {
    event.preventDefault();
    const pasteContent = event.clipboardData?.getData('text');
    if (pasteContent) {
      const filteredVal = pasteContent.replace(/[^0-9]/g, '');
      this.ngControl.control?.setValue(filteredVal, { emitEvent: false });
    }
  }
}

模板中使用指令：

<label for="idCard">ID:</label>
<input type="text" 
      class="form-control form-control-sm" 
      formControlName="idCardInput" 
      name="idCard" 
      id="idCard" 
      ng-pattern="/^[0-9]*$/"
      appOnlyNumbers />

另外，原有的ng-pattern可以保留，作为表单提交时的二次校验，确保输入内容完全符合数字规则。

内容的提问来源于stack exchange，提问作者Haris