如何点击mat-form-field的matPrefix/matSuffix按钮时阻止matInput获取焦点且不破坏表单校验可访问性

这个问题的核心在于，你之前用stopPropagation()阻止了事件冒泡，破坏了Angular Material表单字段内部的校验状态传递机制。而我们真正需要阻止的是点击按钮时输入框自动获取焦点的默认行为，而非完全切断事件冒泡。

正确的思路是监听按钮的mousedown事件（比click更早触发的阶段），并在事件处理中调用$event.preventDefault()。输入框的焦点触发通常发生在mousedown阶段，阻止这个阶段的默认行为就能避免键盘弹出，同时事件仍然可以正常冒泡，不会影响表单校验的错误提示显示。

修改后的代码示例 #

模板部分 #

<mat-form-field>
  <button matPrefix mat-icon-button (mousedown)="onDecrement($event)">
    <mat-icon svgIcon="remove"></mat-icon>
  </button>
  <input type="number" matInput [formControl]="counter">
  <button matSuffix mat-icon-button (mousedown)="onIncrement($event)">
    <mat-icon svgIcon="add"></mat-icon>
  </button>
  <mat-error *ngIf="counter.errors?.['min']">数值不能小于最小值</mat-error>
</mat-form-field>

组件逻辑部分 #

onIncrement(event: MouseEvent) {
  // 阻止mousedown的默认行为，避免输入框获取焦点
  event.preventDefault();
  // 正常执行数值递增逻辑
  this.counter.setValue((this.counter.value || 0) + 1);
}

onDecrement(event: MouseEvent) {
  event.preventDefault();
  this.counter.setValue((this.counter.value || 0) - 1);
}

为什么这样有效？ #

• mousedown是浏览器处理焦点的更早阶段，阻止它的默认行为可以直接避免输入框获得焦点，从根源上解决移动端键盘弹出的问题。
• 我们没有阻止事件冒泡，所以表单控件的状态变化（比如数值低于最小值）仍然会被Angular Material的表单字段捕获，mat-error会正常显示，保证了可访问性。
• 按钮的键盘操作（比如用Enter或Space键触发）不会触发mousedown事件，自然也不会导致输入框聚焦，完全兼容可访问性要求。

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