如何在Angular 7中检查输入字段是否处于焦点[重复]答案

【问题标题】：How to check if an input field is in focus in Angular 7 [duplicate]如何在Angular 7中检查输入字段是否处于焦点[重复]
【发布时间】：2019-12-23 11:12:08
【问题描述】：

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

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

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

【问题讨论】：

你必须使用 DOM 来做到这一点。
你可以使用focus和blur事件，看看这个问题：stackoverflow.com/questions/36755240/…

标签： angular angular6 angular7 angular-forms

【解决方案1】：

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

@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/>

【讨论】：

【解决方案2】：

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

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

还有javascript自己的：

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

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

【讨论】：