Angular中HostListener input事件preventDefault无效，数字输入限制指令失效求助

我来帮你排查下问题哈，你的指令没生效主要有两个关键问题，还有可以优化的地方，咱们一步步来：

1. 构造函数拼写错误 #

你把constructor写成了contructor（少了个s），这会导致Angular无法正确注入ElementRef，指令直接初始化失败，自然不会工作。

2. 事件与判断逻辑错误 #

input事件的事件对象并没有which属性，这个属性是keydown/keyup这类键盘事件才有的，所以你的判断条件永远不会触发，也就没法阻止非数字输入。另外只限制键盘输入还不够，还要处理粘贴场景，不然用户右键粘贴非数字内容还是能成功。

修正后的完整指令代码 #

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

@Directive({ selector: '[numericControl]' })
export class NumericControlDirective {
  // 修正构造函数拼写
  constructor(private el: ElementRef) {}

  // 监听keydown事件处理键盘输入
  @HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {
    // 允许数字键（0-9）、导航键（方向键、退格、删除）和功能键（Tab、Enter等）
    const allowedKeys = [
      '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
      'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter'
    ];
    if (!allowedKeys.includes(e.key)) {
      e.preventDefault();
    }
  }

  // 监听paste事件处理粘贴操作
  @HostListener('paste', ['$event']) onPaste(e: ClipboardEvent) {
    e.preventDefault();
    // 获取粘贴的文本并过滤出数字
    const pastedText = e.clipboardData?.getData('text') || '';
    const numericText = pastedText.replace(/[^0-9]/g, '');
    // 将过滤后的内容插入到输入框
    document.execCommand('insertText', false, numericText);
  }

  // 额外监听input事件，处理输入法或其他特殊场景的输入
  @HostListener('input', ['$event']) onInput(e: InputEvent) {
    const inputElement = this.el.nativeElement as HTMLInputElement;
    // 过滤非数字内容并保留光标位置
    const cursorPosition = inputElement.selectionStart;
    inputElement.value = inputElement.value.replace(/[^0-9]/g, '');
    // 恢复光标位置
    inputElement.setSelectionRange(cursorPosition, cursorPosition);
  }
}

使用注意事项 #

1. 确保你已经在对应的Angular模块中声明了这个指令：

import { NgModule } from '@angular/core';
import { NumericControlDirective } from './numeric-control.directive';

@NgModule({
  declarations: [NumericControlDirective]
})
export class YourModule {}

2. 使用方式和你之前的一样：

<input type="text" placeholder="Volume" numericControl />

这样修改后，你的指令就能正确限制输入框仅接受数字字符，同时覆盖了键盘输入、粘贴、输入法等多种场景~

内容的提问来源于stack exchange，提问作者Shift 'n Tab