Angular项目中移动端键盘‘Go’按钮无法收起问题求助

以下是几个可行的修复思路和方案：

1. 改用Angular模板引用变量替代原生DOM操作 #

直接用document.getElementById可能因Angular变更检测或DOM渲染时机问题导致元素获取失败，改用模板引用变量更符合Angular风格且可靠：

模板代码：

<input #searchInput type="text" (keyup.enter)="handleSearch(searchInput)">
<button (click)="handleSearch(searchInput)">🔍</button>

组件代码：

handleSearch(inputElement: HTMLInputElement) {
  // 执行你的搜索逻辑
  // ...
  // 让输入框失焦以收起键盘
  inputElement.blur();
}

2. 利用表单submit事件处理（推荐） #

移动端的Go按钮本质是触发表单提交，将搜索框包裹在表单中，监听ngSubmit事件，同时阻止默认行为避免页面跳转：

模板代码：

<form (ngSubmit)="onSearchSubmit(searchInput)" #searchForm="ngForm">
  <input #searchInput type="text" name="searchContent" ngModel>
  <button type="submit">🔍</button>
</form>

组件代码：

onSearchSubmit(inputElement: HTMLInputElement) {
  // 执行搜索逻辑
  // ...
  inputElement.blur();
}

这种方式能同时覆盖点击搜索按钮和按下Go按钮的场景，更适配移动端原生行为。

3. 强制触发焦点移除（极端场景） #

若以上方案无效，可尝试先让页面主体获取焦点，再让输入框失焦，部分移动端浏览器对直接调用blur()不敏感：

constructor(private ngZone: NgZone) {}

forceHideKeyboard(inputElement: HTMLInputElement) {
  inputElement.blur();
  document.body.focus();
  // 利用NgZone确保在Angular变更检测周期内执行延迟操作
  this.ngZone.run(() => {
    setTimeout(() => {
      inputElement.blur();
    }, 100);
  });
}

4. 检查事件绑定的正确性 #

确保输入框绑定的是keyup.enter或keydown.enter事件，而非input事件——input事件仅在输入内容变化时触发，无法可靠捕获Go按钮的按键触发行为。

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