如何移除AngularJS Material与回车键按下事件的交互？

当然有办法解决这个问题！Angular Material的复选框、选择器、日期选择器这类组件，默认会绑定回车键的交互逻辑（比如回车会切换复选框的选中状态），如果你的业务场景不需要这个行为，可以通过以下几种方式来移除：

方法一：单个组件直接绑定事件处理 #

如果只是针对某一个特定组件禁用回车交互，最简单的方式就是在模板里直接监听keydown.enter事件，并阻止默认行为：

<md-checkbox (keydown.enter)="$event.preventDefault()"> check </md-checkbox>

这种方式的优点是快速直接，不需要额外的类或指令，适合只需要修改少量组件的场景。

方法二：创建通用指令批量处理 #

如果需要给多个组件禁用回车交互，推荐创建一个可复用的指令，这样不用在每个组件上重复写事件处理：

首先创建一个指令类：

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

@Directive({
  selector: '[disableEnterInteraction]'
})
export class DisableEnterInteractionDirective {
  @HostListener('keydown.enter', ['$event'])
  handleEnterKey(event: KeyboardEvent) {
    // 阻止回车键的默认行为
    event.preventDefault();
    // 可选：停止事件冒泡，避免影响父组件的回车逻辑
    event.stopPropagation();
  }
}

然后在需要禁用回车交互的Material组件上使用这个指令：

<md-checkbox disableEnterInteraction> check </md-checkbox>
<mat-select disableEnterInteraction>
  <mat-option value="option1">选项1</mat-option>
  <mat-option value="option2">选项2</mat-option>
</mat-select>
<mat-datepicker disableEnterInteraction></mat-datepicker>

这种方式的好处是复用性强，后续需要修改逻辑时，只需要调整指令代码即可。

方法三：全局监听（不推荐） #

如果你想全局禁用所有Material组件的回车交互，可以在根组件里添加全局的键盘监听，但这种方式风险较高，可能会影响到其他正常需要回车交互的组件，所以只在特殊场景下使用：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @HostListener('document:keydown.enter', ['$event'])
  handleGlobalEnterKey(event: KeyboardEvent) {
    // 判断目标元素是否是Material组件
    const target = event.target as HTMLElement;
    if (target.tagName.includes('MAT-') || target.tagName.includes('MD-')) {
      event.preventDefault();
    }
  }
}

注意事项 #

• 使用event.preventDefault()只会阻止当前组件的回车默认行为，不会影响其他组件的正常交互；
• 如果需要同时禁止空格键的默认行为（比如复选框也会响应空格切换状态），可以在事件监听里加上keydown.space的处理。

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