Angular中Android设备输入框的数字与单小数点正则限制方案

问题分析 #

原正则验证失效的核心原因是：仅检查输入前的框内值，而非输入后的完整内容。当输入第一个非法字符时，空值会匹配正则，导致无法阻止非法输入。同时Android虚拟键盘的keyCode差异大，必须基于输入内容而非keyCode做验证。

解决方案 #

创建一个可配置的Angular指令，通过@Input区分纯数字/小数输入场景，同时处理键盘输入和粘贴事件，用正则验证输入后的完整内容。

1. 指令实现 #

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

@Directive({
  selector: '[appInputRestriction]'
})
export class InputRestrictionDirective {
  // 配置是否允许小数点，默认不允许（纯数字）
  @Input() allowDecimal = false;

  // 允许通过的控制键（退格、删除、箭头等）
  private controlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];

  @HostListener('keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent): void {
    // 控制键直接放行
    if (this.controlKeys.includes(event.key)) {
      return;
    }

    const currentValue = (event.target as HTMLInputElement).value;
    const newValue = currentValue + event.key;
    const regex = this.getValidationRegex();

    if (!regex.test(newValue)) {
      event.preventDefault();
    }
  }

  @HostListener('paste', ['$event'])
  handlePasteEvent(event: ClipboardEvent): void {
    const pastedText = event.clipboardData?.getData('text') || '';
    const currentValue = (event.target as HTMLInputElement).value;
    const newValue = currentValue + pastedText;
    const regex = this.getValidationRegex();

    if (!regex.test(newValue)) {
      event.preventDefault();
    }
  }

  private getValidationRegex(): RegExp {
    if (this.allowDecimal) {
      // 小数规则：最多1个小数点，前后可带数字，允许空值
      return /^[0-9]*\.?[0-9]*$/;
    } else {
      // 纯数字规则：仅允许数字或空值
      return /^[0-9]*$/;
    }
  }
}

2. 模板中使用 #

<!-- 纯数字输入 -->
<input inputmode="numeric" id="amount1" appInputRestriction>

<!-- 允许小数点的输入 -->
<input inputmode="decimal" id="amount2" appInputRestriction [allowDecimal]="true">

关键细节 #

• 控制键放行：避免阻止退格、箭头等必要操作，提升用户体验
• 验证输入后完整值：将当前值与即将输入/粘贴的内容组合后验证，从根源阻止非法输入
• 正则规则：
  • 纯数字：/^[0-9]*$/ 允许空值或任意长度的数字
  • 小数：/^[0-9]*\.?[0-9]*$/ 允许空值、纯数字、单个小数点（前后可带数字），但禁止多个小数点
• 适配Android：不依赖keyCode，仅基于输入的字符内容验证，兼容不同虚拟键盘的输入行为

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