求autofocus在缓存表单中每次聚焦首个输入框的解决方案

问题说明 #

autofocus属性仅在页面加载或刷新时生效。当表单被缓存（比如通过*ngIf隐藏/显示），再次打开时焦点会停留在上次关闭前的输入框，需要实现每次打开都自动聚焦首个输入框。

可行方案 #

1. 结合组件显示状态与延迟聚焦 #

在打开表单的方法中，先切换显示状态，再通过setTimeout确保视图渲染完成后触发焦点：

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

@Component({
  selector: 'app-cached-form',
  template: `
    <div *ngIf="isFormVisible">
      <input type="text" #firstInput id="first">
      <input type="text" id="second">
    </div>
  `
})
export class CachedFormComponent {
  isFormVisible = false;
  @ViewChild('firstInput') firstInput!: ElementRef<HTMLInputElement>;

  openForm() {
    this.isFormVisible = true;
    // 延迟0毫秒确保DOM已更新
    setTimeout(() => {
      this.firstInput.nativeElement.focus();
    }, 0);
  }
}

2. 使用Renderer2操作DOM（符合Angular最佳实践） #

避免直接操作nativeElement，用Angular的Renderer2来触发焦点：

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

@Component({
  selector: 'app-cached-form',
  template: `
    <div *ngIf="isFormVisible">
      <input type="text" #firstInput id="first">
      <input type="text" id="second">
    </div>
  `
})
export class CachedFormComponent {
  isFormVisible = false;
  @ViewChild('firstInput') firstInput!: ElementRef<HTMLInputElement>;

  constructor(private renderer: Renderer2) {}

  openForm() {
    this.isFormVisible = true;
    setTimeout(() => {
      this.renderer.selectRootElement(this.firstInput.nativeElement).focus();
    }, 0);
  }
}

3. 封装自定义指令（复用性强） #

如果多个表单需要该功能，封装指令监听元素显示状态，自动聚焦：

import { Directive, ElementRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[autoFocusOnVisible]'
})
export class AutoFocusOnVisibleDirective implements OnInit, OnChanges {
  constructor(private el: ElementRef<HTMLInputElement>) {}

  ngOnInit() {
    this.triggerFocus();
  }

  ngOnChanges(changes: SimpleChanges) {
    // 监听*ngIf等导致元素显示状态变化的场景
    if (changes['ngIf'] || changes['hidden']) {
      this.triggerFocus();
    }
  }

  private triggerFocus() {
    // 确认元素已挂载到DOM
    if (this.el.nativeElement.offsetParent !== null) {
      setTimeout(() => this.el.nativeElement.focus(), 0);
    }
  }
}

使用示例：

<div *ngIf="isFormVisible">
  <input type="text" autoFocusOnVisible id="first">
  <input type="text" id="second">
</div>

原尝试无效的原因 #

• ngAfterViewInit仅在组件首次初始化时执行，缓存表单再次显示时不会触发，因此无法重新聚焦。
• 模板中直接写{{ myInput.focus() }}会在每次变更检测时执行，当存在多个输入框时，焦点会频繁切换，最终停留在最后交互的输入框。

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