Установить фокус на элемент <input>

Я работаю с клиентским приложением с Angular 5, и мне нужно, чтобы поле поиска было скрыто, но при нажатии кнопки поле поиска должно отображаться и фокусироваться.

Я пробовал несколько способов найти в StackOverflow с помощью директивы или около того, но не смог.

Вот пример кода:

@Component({
   selector: 'my-app',
   template: `
    <div>
    <h2>Hello</h2>
    </div>
    <button (click) ="showSearch()">Show Search</button>
    <p></p>
    <form>
      <div >
        <input *ngIf="show" #search type="text"  />            
      </div>
    </form>
    `,
  })
  export class App implements AfterViewInit {
  @ViewChild('search') searchElement: ElementRef;

  show: false;
  name:string;
  constructor() {    
  }

  showSearch(){
    this.show = !this.show;    
    this.searchElement.nativeElement.focus();
    alert("focus");
  }

  ngAfterViewInit() {
    this.firstNameElement.nativeElement.focus();
  }

Поле поиска не настроено на фокус.

Как я могу это сделать?

Измените метод поиска шоу следующим образом

showSearch(){
  this.show = !this.show;  
  setTimeout(()=>{ // this will make the execution after the above boolean has changed
    this.searchElement.nativeElement.focus();
  },0);  
}

Для этого вам следует использовать html- автофокус :

<input *ngIf="show" #search type="text" autofocus /> 

Примечание: если ваш компонент сохраняется и используется повторно, он будет выполнять автофокусировку только при первом присоединении фрагмента. Это можно преодолеть, имея глобальный прослушиватель dom, который проверяет атрибут автофокуса внутри фрагмента dom, когда он прикреплен, а затем повторно применяет его или фокусируется через javascript.

Эта директива мгновенно сфокусируется и выделит любой текст в элементе, как только он отобразится. В некоторых случаях для этого может потребоваться setTimeout, он мало тестировался.

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

@Directive({
  selector: '[appPrefixFocusAndSelect]',
})
export class FocusOnShowDirective implements OnInit {

  constructor(private el: ElementRef) {
    if (!el.nativeElement['focus']) {
      throw new Error('Element does not accept focus.');
    }
  }

  ngOnInit(): void {
    const input: HTMLInputElement = this.el.nativeElement as HTMLInputElement;
    input.focus();
    input.select();
  }
}

И в HTML:

 <mat-form-field>
     <input matInput type="text" appPrefixFocusAndSelect [value]="'etc'">
 </mat-form-field>

Я собираюсь взвесить это (решение Angular 7)

input [appFocus]="focus"....

import {AfterViewInit, Directive, ElementRef, Input,} from '@angular/core';

@Directive({
  selector: 'input[appFocus]',
})
export class FocusDirective implements AfterViewInit {

  @Input('appFocus')
  private focused: boolean = false;

  constructor(public element: ElementRef<HTMLElement>) {
  }

  ngAfterViewInit(): void {
    // ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
    if (this.focused) {
      setTimeout(() => this.element.nativeElement.focus(), 0);
    }
  }
}

Это работает в Angular 8 без setTimeout:

import {AfterContentChecked, Directive, ElementRef} from '@angular/core';

@Directive({
  selector: 'input[inputAutoFocus]'
})
export class InputFocusDirective implements AfterContentChecked {
  constructor(private element: ElementRef<HTMLInputElement>) {}

  ngAfterContentChecked(): void {
    this.element.nativeElement.focus();
  }
}

Объяснение: Хорошо, это работает из-за: Обнаружения изменений. По той же причине работает setTimout, но при запуске setTimeout в Angular он обходит Zone.js и снова запускает все проверки, и это работает, потому что, когда setTimeout завершен, все изменения завершаются. С правильным крючком жизненного цикла (AfterContentChecked) можно достичь того же результата, но с тем преимуществом, что дополнительный цикл не будет выполняться. Функция срабатывает, когда все изменения проверены и переданы, и запускается после хуков AfterContentInit и DoCheck. Если я ошибаюсь, поправьте меня.

Больше одного жизненного цикла и обнаружение изменений на https://angular.io/guide/lifecycle-hooks

ОБНОВЛЕНИЕ : я нашел еще лучший способ сделать это, если использовать Angular Material CDK, a11y-package. Сначала импортируйте A11yModule в модуль, объявляющий компонент, в котором есть поле ввода. Затем используйте директивы cdkTrapFocus и cdkTrapFocusAutoCapture и используйте это в html и установите tabIndex на входе:

<div class="dropdown" cdkTrapFocus cdkTrapFocusAutoCapture>
    <input type="text tabIndex="0">
</div>

У нас возникли некоторые проблемы с нашими раскрывающимися списками, касающимися позиционирования и скорости реакции, и мы начали использовать OverlayModule из cdk, и этот метод с использованием A11yModule работает безупречно.

Чтобы выполнить выполнение после изменения логического значения и избежать использования тайм-аута, вы можете сделать:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cd: ChangeDetectorRef) {}

showSearch(){
  this.show = !this.show;  
  this.cd.detectChanges();
  this.searchElement.nativeElement.focus();
}

В Angular, в самом HTML, вы можете установить фокус на ввод при нажатии кнопки.

<button (click)="myInput.focus()">Click Me</button>

<input #myInput></input>

Также есть атрибут DOM, cdkFocusInitialкоторый у меня работает с входными данными. Подробнее об этом можно прочитать здесь: https://material.angular.io/cdk/a11y/overview

Только с использованием Angular Template

<input type="text" #searchText>

<span (click)="searchText.focus()">clear</span>

html компонента:

<input [cdkTrapFocusAutoCapture]="show" [cdkTrapFocus]="show">

контроллер компонента:

showSearch() {
  this.show = !this.show;    
}

..и не забываем про импорт A11yModule из @ angular / cdk / a11y

import { A11yModule } from '@angular/cdk/a11y'

Более простой способ - сделать это.

let elementReference = document.querySelector('<your css, #id selector>');
    if (elementReference instanceof HTMLElement) {
        elementReference.focus();
    }