Angular中如何始终让隐藏输入框保持焦点？

要实现输入框初始化后始终保持焦点（点击页面其他区域也自动回到输入框），你需要监听输入框的blur事件（失去焦点时触发），并在事件回调中重新聚焦输入框。原代码仅在ngAfterViewInit中执行一次聚焦，无法处理后续的焦点丢失情况，具体修改如下：

修改后的TypeScript代码 #

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

@Component({
  // 组件元数据保持原有配置
})
export class YourComponent implements OnDestroy {
  @ViewChild('input') input: ElementRef;
  text: string;
  tab = true; // 保留你的tab判断逻辑
  private blurListener: () => void;

  ngAfterViewInit(): void {
    if (this.tab) {
      this.focusInput();
    }

    // 监听输入框失去焦点事件
    this.blurListener = () => {
      // 延迟执行聚焦，避免和页面其他焦点操作冲突
      Promise.resolve().then(() => {
        this.focusInput();
      });
    };
    this.input.nativeElement.addEventListener('blur', this.blurListener);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，防止内存泄漏
    if (this.input?.nativeElement && this.blurListener) {
      this.input.nativeElement.removeEventListener('blur', this.blurListener);
    }
  }

  private focusInput(): void {
    if (this.input?.nativeElement) {
      this.input.nativeElement.focus();
    }
  }

  onEnter(event: Event): void {
    // 保留你的回车事件处理逻辑
    console.log('输入内容:', this.text);
  }
}

关键说明 #

1. 监听blur事件：输入框失去焦点时触发blur事件，在回调中重新执行聚焦操作，确保焦点始终回到输入框。
2. 延迟聚焦：用Promise.resolve().then()延迟执行聚焦，避免和页面其他元素的焦点转移操作冲突。
3. 清理监听：在ngOnDestroy中移除blur事件监听，防止组件销毁后出现内存泄漏。
4. 替代autofocus：autofocus属性可能因组件初始化时机、其他元素抢占焦点等原因失效，通过代码控制聚焦更可靠。

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