Angular 12中如何禁止输入框粘贴e字符及小数位？

问题分析 #

你当前的实现仅首次生效，核心原因包括：

• type="number"的输入框原生支持科学计数法，允许输入e字符，且粘贴操作会直接将内容解析为数字同步到模型，ngModelChange的触发时机无法拦截非法内容的视图渲染
• 当模型值已为整数时，Math.trunc()处理后的数值与原模型值无差异（如从5.5截断到5，但原模型值已是5），Angular变更检测会跳过视图更新，导致输入框仍显示非法内容

解决方案 #

通过粘贴事件拦截非法内容+输入事件强制格式化数值+键盘事件禁止输入非法字符的组合方式，彻底实现需求：

HTML代码

<input type="number"
       min="1"
       [(ngModel)]="testItem"
       (paste)="handlePaste($event)"
       (input)="formatInputValue()"
       (keydown)="handleKeyDown($event)">

TS代码

testItem: number = 1;

// 拦截粘贴事件，过滤非法内容
handlePaste(event: ClipboardEvent) {
  event.preventDefault();
  const pasteContent = event.clipboardData?.getData('text') || '';
  // 只保留正整数字符
  const filteredContent = pasteContent.replace(/[^0-9]/g, '');
  if (filteredContent) {
    // 转换为数字并确保最小值为1
    this.testItem = Math.max(parseInt(filteredContent, 10), 1);
  }
}

// 格式化输入值，确保为正整数
formatInputValue() {
  if (this.testItem === null || this.testItem === undefined) {
    this.testItem = 1;
    return;
  }
  // 截断小数位，同时确保最小值为1
  this.testItem = Math.max(Math.trunc(this.testItem), 1);
}

// 禁止输入e、.、-等非法字符
handleKeyDown(event: KeyboardEvent) {
  const forbiddenKeys = ['e', 'E', '.', '-', '+'];
  if (forbiddenKeys.includes(event.key)) {
    event.preventDefault();
  }
}

方案说明 #

1. 粘贴拦截：直接获取剪贴板内容，过滤掉非数字字符后再同步到模型，完全阻止非法内容进入输入框
2. 输入格式化：每次输入后强制截断小数位并确保最小值为1，覆盖所有可能的非法输入场景
3. 键盘拦截：禁止直接输入e、.等原生number输入框允许的非法字符，从源头阻止输入

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