Angular Material中如何阻止回车键触发焦点跳转到下一个输入框？

当然可以搞定这个问题！我之前也遇到过类似的场景，给你两个实用的方案，适配你在ng-repeat里的表格输入框：

方案1：直接绑定键盘事件快速解决 #

你可以在每个输入框上绑定keydown事件，当检测到回车键时，阻止浏览器的默认焦点跳转行为。

首先在你的组件TypeScript代码里添加这个处理方法：

preventEnterFocus(event: KeyboardEvent) {
  if (event.key === 'Enter') {
    event.preventDefault(); // 阻止默认的焦点跳转逻辑
    event.stopPropagation(); // 避免事件冒泡影响其他元素
    // 可选：如果需要回车后让输入框失去焦点，加上这行
    (event.target as HTMLInputElement).blur();
    // 这里还可以添加你自己的回车触发逻辑，比如保存当前输入值
  }
}

然后在ng-repeat内的输入框上绑定这个事件：

<td>
  <md-input-container md-no-float class="md-block inline-input-box qty-inp">
    <input auto... (keydown)="preventEnterFocus($event)">
  </md-input-container>
</td>

方案2：封装自定义指令（复用性更强） #

如果你的表格里有很多这类输入框，重复写事件绑定太麻烦，推荐封装一个自定义指令，一次定义到处用。

创建一个指令文件prevent-enter-focus.directive.ts：

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

@Directive({
  selector: '[preventEnterFocus]'
})
export class PreventEnterFocusDirective {

  @HostListener('keydown.enter', ['$event'])
  handleEnterKey(event: KeyboardEvent) {
    event.preventDefault();
    event.stopPropagation();
    // 同样可以添加自定义逻辑，比如失焦或触发数据更新
    (event.target as HTMLInputElement).blur();
  }
}

接着在你的Angular模块里声明这个指令，之后在HTML里直接给输入框加上指令属性就行：

<td>
  <md-input-container md-no-float class="md-block inline-input-box qty-inp">
    <input auto... preventEnterFocus>
  </md-input-container>
</td>

小补充 #

这种自动跳转是Angular Material输入组件结合浏览器表单导航的默认行为，我们通过event.preventDefault()就能直接打断这个流程，完全不会影响输入框的其他功能。如果需要回车时执行特定操作（比如提交表单、计算数值），直接在阻止默认行为后加对应的代码就好。

内容的提问来源于stack exchange，提问作者Ankita.P