Définir le focus sur <input> élément

Je suis en train de travailler d'une application front-end Angulaire 5, et j'ai besoin d'avoir une zone de recherche cachés, mais sur le clic d'un bouton, la boîte de recherche doit être affiché et concentré.

J'ai essayé quelques moyens trouvés sur StackOverflow à la directive, mais ne peut pas réussir.

Voici un exemple de code:

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

La zone de recherche n'est pas centrée.

Comment puis-je le faire?

InformationsquelleAutor Bob | 2018-04-24
  1. 41

    Modifier le spectacle de la méthode de recherche comme cette

    showSearch(){
  this.show = !this.show;  
  setTimeout(()=>{ //this will make the execution after the above boolean has changed
    this.searchElement.nativeElement.focus();
  },0);  
}
    • Pourquoi avons-nous besoin d'utiliser setTimeout? N'est-ce pas le changement de booléenne synchrone?
    • n'est-ce pas mess avec zonejs?
    InformationsquelleAutor Arvind Muthuraman
  2. 16

    Vous devez utiliser le format html autofocus pour cela:

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

    Remarque: si votre composant est conservé et réutilisé il ne autofocus la première fois que le fragment est créé. Cela peut être surmonté par avoir un mondial dom auditeur qui vérifie pour l'attribut autofocus à l'intérieur d'un dom fragment lorsqu'il est connecté, puis de le réappliquer ou focus via javascript.

    • Cela ne fonctionnera une fois chaque actualisation de la page, et non pas plusieurs fois.
    InformationsquelleAutor N-ate
  3. 6

    Cette directive va instantanément se concentrer et de sélectionner tout le texte dans l'élément dès qu'il s'affiche. Cela peut nécessiter un setTimeout pour certains cas, il n'a pas été testé beaucoup. 

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

    Et dans le code HTML:

     <mat-form-field>
     <input matInput type="text" appPrefixFocusAndSelect [value]="'etc'">
 </mat-form-field>
    InformationsquelleAutor ggranum
  4. 3

    Je vais peser sur cette (Angulaire 7 Solution)

    d'entrée [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);
    }
  }
}
    InformationsquelleAutor Ricardo Saracino
  5. 2

    Pour rendre l'exécution après la boolean a changé et éviter l'utilisation de l'expiration du délai que vous pouvez faire:

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

constructor(private cd: ChangeDetectorRef) {}

showSearch(){
  this.show = !this.show;  
  this.cd.detectChanges();
  this.searchElement.nativeElement.focus();
}
    • J'ai essayé ce angulaire 7, il n'a pas de travail, à l'aide de délai d'attente a bien fonctionné
    InformationsquelleAutor Marcin Restel