Как проверить, находится ли поле ввода в фокусе в Angular 7

Question

У меня есть форма, и я хочу знать, ориентированы ли какие-либо поля ввода в форме или нет?

Я прочитал документацию "NgForm", но не нашел ничего, связанного с "фокусом".

Я нашел тронутым, но это не удовлетворяет потребности.

Answer 1

Вы можете использовать события фокусировки и размытия, чтобы отслеживать, когда поля приобретают или теряют фокус:

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

Есть также собственные javascript:

document.hasFocus (): имеет ли фокус документ или какой-либо элемент внутри документа.

document.activeElement: Свойство, содержащее какой элемент в данный момент имеет фокус.

Answer 2

За один раз вы можете иметь один сфокусированный ввод. Вероятно, самый простой способ - использовать событие focus и передать элемент в ваш компонент.

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