Angular中<input type="number">长位数异常及15位可复用限制需求

问题根源 #

input[type="number"]依赖JavaScript的Number类型存储值，而Number的最大安全整数是2^53 - 1（即9007199254740991，共16位），输入超过16位的数字时，超出部分会因精度丢失被截断为0。

可复用解决方案：自定义Angular指令 #

指令可全局复用，同时处理输入长度限制、非数字过滤，还能避免Number类型的精度问题（建议改用type="text"）。

1. 创建自定义指令 #

生成指令文件（比如number-length-limit.directive.ts）：

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

@Directive({
  selector: '[appNumberLengthLimit]'
})
export class NumberLengthLimitDirective {
  // 允许的最大长度，可通过输入属性自定义，默认15位
  @Input() maxLength = 15;

  constructor(private el: ElementRef) {}

  @HostListener('keypress', ['$event'])
  onKeypress(event: KeyboardEvent): boolean {
    const input = this.el.nativeElement as HTMLInputElement;
    const char = event.key;
    
    // 过滤非数字字符（允许退格、删除等控制键）
    if (!/^\d$/.test(char) && !event.ctrlKey && !event.metaKey) {
      event.preventDefault();
      return false;
    }

    // 限制输入长度
    if (input.value.length >= this.maxLength) {
      event.preventDefault();
      return false;
    }

    return true;
  }

  // 处理粘贴事件，避免粘贴超长内容
  @HostListener('paste', ['$event'])
  onPaste(event: ClipboardEvent): void {
    const input = this.el.nativeElement as HTMLInputElement;
    event.preventDefault();
    const pastedText = event.clipboardData?.getData('text') || '';
    // 只保留数字，且截断到最大长度
    const filteredText = pastedText.replace(/\D/g, '').slice(0, this.maxLength);
    input.value = filteredText;
  }
}

2. 注册指令 #

在你的模块（比如AppModule）中声明并导出指令：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NumberLengthLimitDirective } from './number-length-limit.directive';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    NumberLengthLimitDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在模板中使用 #

把原来的type="number"改成type="text"（避免精度问题），然后应用指令：

<input type="text" class="form-control" appNumberLengthLimit [maxLength]="15">

如果需要自定义长度，直接修改[maxLength]的值即可，比如[maxLength]="12"。

替代方案：修改原有方法（复用性差） #

如果不想做指令，也可以修改你现有的omit_special_char方法，增加长度判断，但这种方式仅适用于单个组件：

omit_special_char(event: KeyboardEvent): boolean {
  const charCode = event.which || event.keyCode;
  const input = event.target as HTMLInputElement;

  // 过滤非数字字符（保留退格等控制键）
  if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode !== 45) {
    return false;
  }

  // 限制长度为15位
  if (input.value.length >= 15) {
    return false;
  }

  return true;
}

模板中建议改成type="text"避免精度丢失：

<input type="text" class="form-control" (keypress)="omit_special_char($event)">

注意：如果必须使用type="number"，即使限制15位，也要注意接近最大安全整数时的精度问题，优先推荐type="text"配合指令的方案。

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