Angular中如何实时检测输入框值变化，无需按下回车键

方案1：使用input事件 #

input事件会在输入框的值任何变化时触发，包括输入字符、退格、删除、粘贴、剪切等操作，完全覆盖你的需求场景。

模板代码： #

<input type="text" (input)="onInputChange($event)">

组件代码： #

onInputChange(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  const currentValue = inputElement.value;
  // 在这里编写值变更后的处理逻辑
  console.log('当前输入值:', currentValue);
}

方案2：结合ngModel与ngModelChange（绑定组件属性场景） #

如果输入框需要绑定组件内部属性，可通过ngModelChange直接监听值的变更，无需依赖ngOnChanges（后者仅监听@Input装饰的属性）。

模板代码： #

<input type="text" [ngModel]="inputValue" (ngModelChange)="onModelChange($event)">

组件代码： #

inputValue = '';

onModelChange(newValue: string) {
  this.inputValue = newValue;
  // 处理值变更逻辑
  console.log('输入值更新为:', newValue);
}

方案3：keyup事件（不推荐） #

keyup会在按键抬起时触发，包含退格、删除键，但它是基于按键动作而非值变更——比如鼠标右键粘贴内容时不会触发，按住按键连续输入时会多次触发，可靠性远不如input事件，仅作兼容参考：

模板代码示例： #

<input type="text" (keyup)="onKeyUp($event)">

总结：优先选用**input事件**，它是专门监听输入框值变更的标准事件，覆盖所有值变化场景，实现简单且稳定。

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