Angular控制器中输入框失焦问题：focus有效但blur无效

嘿，我之前也碰到过一模一样的情况——focus()正常工作，blur()却没反应，折腾了好一会儿才捋清楚原因，给你分享几个排查方向和解决办法：

1. 先确认调用时机是否正确 #

Angular的视图初始化有自己的生命周期，如果在视图还没完全渲染好的时候调用blur()，元素可能还没挂载到DOM上，自然不会生效。

• 如果你是在组件初始化阶段（比如ngOnInit）调用，建议移到ngAfterViewInit钩子中，这时候视图已经完全初始化：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({...})
export class YourComponent implements AfterViewInit {
  @ViewChild('searchInput', { static: false }) searchInput: ElementRef;

  ngAfterViewInit(): void {
    // 这里调用blur就没问题了
    this.searchInput.nativeElement.blur();
  }
}

• 如果是在异步操作（比如API请求、订阅事件）之后调用，可能需要给Angular一点时间更新DOM，可以用setTimeout包裹一下：

yourAsyncFunction().subscribe(() => {
  setTimeout(() => {
    this.searchInput.nativeElement.blur();
  }, 0);
});

2. 检查元素是否被动态控制 #

如果你的输入框是用*ngIf、*ngFor这类指令动态显示/隐藏的，调用blur()的时候元素可能根本不在DOM里。

• 确保调用blur()之前，元素已经存在：

blurInput() {
  // 用可选链操作符避免空指针
  if (this.searchInput?.nativeElement) {
    this.searchInput.nativeElement.blur();
  }
}

• 同时，@ViewChild的配置要设为{ static: false }，这样Angular会在每次视图变更后更新元素引用：

@ViewChild('searchInput', { static: false }) searchInput: ElementRef;

3. 排查第三方组件/指令的干扰 #

如果你用的是Angular Material、NG-ZORRO这类UI库的输入组件，直接操作组件的nativeElement可能不是真正的<input>元素——比如mat-input的原生input是被包裹在组件内部的。

这时候需要先找到真正的原生input元素再调用blur：

// 以Angular Material为例
const nativeInput = this.searchInput.nativeElement.querySelector('input');
if (nativeInput) {
  nativeInput.blur();
}

4. 强制触发变更检测（极端情况） #

如果以上方法都不行，可能是Angular的变更检测没有及时更新视图，可以注入ChangeDetectorRef手动触发：

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

constructor(private cdr: ChangeDetectorRef) {}

blurInput() {
  this.searchInput.nativeElement.blur();
  // 强制更新视图
  this.cdr.detectChanges();
}

你可以按照这个顺序排查，应该能解决问题～

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