Setzen Sie den Fokus auf das <input> -Element

Ich arbeite an einer Front-End-Anwendung mit Angular 5 und muss ein Suchfeld ausblenden, aber auf Knopfdruck sollte das Suchfeld angezeigt und fokussiert werden.

Ich habe einige Möglichkeiten ausprobiert, die in StackOverflow mit Direktive oder so gefunden wurden, kann aber keinen Erfolg haben.

Hier ist der Beispielcode:

@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();
  }

Das Suchfeld ist nicht auf Fokus eingestellt.

Wie kann ich das machen?

Ändern Sie die Suchmethode für Shows wie folgt

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

Sie sollten dafür den HTML- Autofokus verwenden :

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

Hinweis: Wenn Ihre Komponente beibehalten und wiederverwendet wird, wird der Autofokus nur beim ersten Anhängen des Fragments automatisch aktiviert. Dies kann überwunden werden, indem ein globaler Dom-Listener über ein Autofokus-Attribut in einem Dom-Fragment verfügt, wenn es angehängt ist, und es dann erneut anwendet oder über Javascript fokussiert.

Diese Anweisung fokussiert und wählt sofort jeden Text im Element aus, sobald er angezeigt wird. Dies kann in einigen Fällen ein setTimeout erfordern, es wurde nicht viel getestet.

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();
  }
}

Und im HTML:

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

Ich werde das abwägen (Angular 7 Solution)

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);
    }
  }
}

Dies funktioniert in Angular 8 ohne 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();
  }
}

Erläuterung: Ok, das funktioniert aus folgenden Gründen: Änderungserkennung. Es ist der gleiche Grund, warum setTimout funktioniert, aber wenn ein setTimeout in Angular ausgeführt wird, umgeht es Zone.js und führt alle Überprüfungen erneut aus. Wenn das setTimeout abgeschlossen ist, werden alle Änderungen abgeschlossen. Mit dem richtigen Lifecycle Hook (AfterContentChecked) kann das gleiche Ergebnis erzielt werden, jedoch mit dem Vorteil, dass der zusätzliche Zyklus nicht ausgeführt wird. Die Funktion wird ausgelöst, wenn alle Änderungen überprüft und übergeben wurden, und wird nach den Hooks AfterContentInit und DoCheck ausgeführt. Wenn ich mich hier irre, korrigiere mich bitte.

Weitere Lebenszyklen und Änderungserkennung unter https://angular.io/guide/lifecycle-hooks

UPDATE : Ich habe einen noch besseren Weg gefunden, dies zu tun, wenn man Angular Material CDK verwendet, das a11y-Paket. Importieren Sie zuerst A11yModule in das Modul und deklarieren Sie die Komponente, in der Sie das Eingabefeld haben. Verwenden Sie dann die Direktiven cdkTrapFocus und cdkTrapFocusAutoCapture und verwenden Sie diese in HTML und setzen Sie tabIndex für die Eingabe:

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

Wir hatten einige Probleme mit unseren Dropdowns in Bezug auf Positionierung und Reaktionsfähigkeit und haben stattdessen begonnen, das OverlayModule aus dem CDK zu verwenden. Diese Methode mit A11yModule funktioniert einwandfrei.

So führen Sie die Ausführung durch, nachdem sich der Boolesche Wert geändert hat, und vermeiden die Verwendung von Timeout:

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

constructor(private cd: ChangeDetectorRef) {}

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

In Angular können Sie in HTML selbst den Fokus so einstellen, dass er beim Klicken auf eine Schaltfläche eingegeben wird.

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

<input #myInput></input>

Es gibt auch ein DOM-Attribut, cdkFocusInitialdas bei Eingaben für mich funktioniert. Weitere Informationen finden Sie hier: https://material.angular.io/cdk/a11y/overview

Nur Angular Template verwenden

<input type="text" #searchText>

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

HTML der Komponente:

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

Controller der Komponente:

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

..und vergessen Sie nicht, A11yModule aus @ angle / cdk / a11y zu importieren

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

Einfacher ist es auch, dies zu tun.

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