Bootstrap 5中如何禁用ESC按键清空输入框的功能？

问题分析 #

HTML5原生的type="search"输入框自带按下ESC键清空内容的默认行为，这个操作由浏览器直接执行，不会走Angular的ngModel绑定更新流程，因此不会触发ngModelChange事件。要解决这个问题，核心是拦截ESC键的默认行为。

解决方案 #

给输入框添加keydown.escape事件监听，调用$event.preventDefault()阻止浏览器的默认清空动作：

<form class="container" role="search">
    <div class="row">
      <div class="col-12">
        <input name="searchItem" #searchInput="ngModel" ngModel
          (ngModelChange)="searchUserShowCpv(searchInput.value)" 
          (keydown.escape)="$event.preventDefault()"
          class="form-control me-2" type="search"
          placeholder="Search" aria-label="Search">
      </div>
    </div>
  </form>

自定义ESC行为补充 #

如果之后需要自定义ESC键的操作（比如手动清空输入框并确保触发ngModelChange），可以在组件中实现处理方法：

组件类代码：

onEscapeKey(event: KeyboardEvent) {
  event.preventDefault();
  // 手动修改绑定值，触发ngModelChange
  this.searchItem = '';
}

模板对应修改：

(keydown.escape)="onEscapeKey($event)"

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