ตั้งโฟกัสที่องค์ประกอบ <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 /> 

หมายเหตุ: หากส่วนประกอบของคุณยังคงอยู่และนำกลับมาใช้ใหม่จะโฟกัสอัตโนมัติในครั้งแรกที่ต่อชิ้นส่วน สิ่งนี้สามารถเอาชนะได้โดยการมี global dom listener ที่ตรวจสอบแอตทริบิวต์ออโต้โฟกัสภายใน Dom fragment เมื่อมีการเชื่อมต่อจากนั้นนำไปใช้ซ้ำหรือโฟกัสผ่าน 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 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);
    }
  }
}

สิ่งนี้ใช้งานได้ i 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();
  }
}

คำอธิบาย: ตกลงดังนั้นสิ่งนี้ได้ผลเนื่องจาก: Change detection เป็นเหตุผลเดียวกับที่ setTimout ทำงาน แต่เมื่อเรียกใช้ setTimeout ใน Angular มันจะข้าม Zone.js และเรียกใช้การตรวจสอบทั้งหมดอีกครั้งและทำงานได้เนื่องจากเมื่อ setTimeout เสร็จสมบูรณ์การเปลี่ยนแปลงทั้งหมดจะเสร็จสมบูรณ์ ด้วย Lifecycle Hook ที่ถูกต้อง (AfterContentChecked) ผลลัพธ์เดียวกันสามารถเข้าถึงได้ แต่มีข้อได้เปรียบที่จะไม่เรียกใช้รอบพิเศษ ฟังก์ชันจะเริ่มทำงานเมื่อมีการตรวจสอบและส่งผ่านการเปลี่ยนแปลงทั้งหมดและทำงานหลังจาก hooks AfterContentInit และ DoCheck ถ้าฉันผิดที่นี่โปรดแก้ไขฉัน

อีกหนึ่งวงจรชีวิตและการตรวจจับการเปลี่ยนแปลงบนhttps://angular.io/guide/lifecycle-hooks

อัปเดต : ฉันพบวิธีที่ดีกว่านี้หากใช้ Angular Material CDK ซึ่งเป็นแพ็คเกจ a11y ก่อนนำเข้า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();
    }