如何检查输入字段是否在 Angular 7 中处于焦点

Question

我有一个表单，我想知道表单中的任何输入字段是否有焦点？

我阅读了“ NgForm ”文档，但没有找到与“ focus ”相关的任何内容。

我发现感动，但它不能满足需求。

Answer 1

您可以使用 focus 和 blur 事件来跟踪字段获得或失去焦点：

<input (focus)="onFocus()" (blur)="onBlur()">

还有 javascript 自己的：

document.hasFocus() ：文档或文档内的任何元素是否具有焦点。

document.activeElement ：包含当前具有焦点的元素的属性。

Answer 2

一次您可以有一个重点输入。可能最简单的方法是使用焦点事件并将元素传递给您的组件

@Component({
  selector: 'my-comp',
  template: `
    <input type="text "(focus)="onFocus($event)" (blur)="onFocus()" />
  `
})
export class AppComponent {
  selectedElement: any;
  onFocus(event) {
    if(event){
       this.selectedElement = event.target;
    } else {
       this.selectedElement = null; 
    }
  }
}

其他选项是编写指令来设置特定类的焦点

import { Directive, HostListener, HostBinding } from '@angular/core';
@Directive({
  selector: '[trackFocus]'
})
export class TrackFocusDirective {
  @HostBinding('class.my-focused-element') isFocused: boolean;
  constructor() {}

  @HostListener('focus', ['$event']) onFocus(e) {
    this.isFocused = true;
  }
  @HostListener('blur', ['$event']) onblur(e) {
    this.isFocused = false;
  }
}

所以现在你可以这样做

<input type="text"  trackFocus/>