Đặt tiêu điểm vào phần tử <input>

Tôi đang làm việc với một ứng dụng front-end với Angular 5 và tôi cần ẩn hộp tìm kiếm, nhưng khi nhấp vào một nút, hộp tìm kiếm sẽ được hiển thị và tập trung.

Tôi đã thử một số cách được tìm thấy trên StackOverflow với chỉ thị hoặc tương tự, nhưng không thể thành công.

Đây là mã mẫu:

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

Hộp tìm kiếm không được đặt thành tiêu điểm.

Làm thế nào tôi có thể làm điều đó?

Sửa đổi phương pháp tìm kiếm chương trình như thế này

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

Bạn nên sử dụng tự động lấy nét html cho việc này:

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

Lưu ý: nếu thành phần của bạn được duy trì và sử dụng lại, nó sẽ chỉ tự động lấy nét vào lần đầu tiên phân mảnh được gắn vào. Điều này có thể được khắc phục bằng cách có một trình nghe dom toàn cầu kiểm tra thuộc tính tự động lấy nét bên trong một phân đoạn dom khi nó được đính kèm và sau đó áp dụng lại nó hoặc lấy nét qua javascript.

Chỉ thị này sẽ ngay lập tức tập trung và chọn bất kỳ văn bản nào trong phần tử ngay khi nó được hiển thị. Điều này có thể yêu cầu setTimeout đối với một số trường hợp, nó chưa được thử nghiệm nhiều.

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

Và trong HTML:

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

Tôi sẽ cân nhắc về vấn đề này (Giải pháp 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);
    }
  }
}

Điều này đang hoạt động i Angular 8 mà không có 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();
  }
}

Giải thích: Ok vì vậy điều này hoạt động vì: Phát hiện thay đổi. Đó cũng là lý do setTimout hoạt động, nhưng khi chạy setTimeout trong Angular, nó sẽ bỏ qua Zone.js và chạy lại tất cả các kiểm tra, và nó hoạt động vì khi setTimeout hoàn tất, tất cả các thay đổi đã hoàn thành. Với móc vòng đời chính xác (AfterContentChecked), kết quả tương tự có thể đạt được, nhưng với lợi thế là chu kỳ bổ sung sẽ không được chạy. Hàm sẽ kích hoạt khi tất cả các thay đổi được kiểm tra và thông qua, đồng thời chạy sau các hook AfterContentInit và DoCheck. Nếu tôi sai ở đây xin vui lòng sửa cho tôi.

Thêm một vòng đời và phát hiện thay đổi trên https://angular.io/guide/lifecycle-hooks

CẬP NHẬT : Tôi đã tìm thấy một cách thậm chí còn tốt hơn để làm điều này nếu một người đang sử dụng Angular Material CDK, gói a11y. Nhập khẩu đầu tiên A11yModule trong module khai báo các thành phần bạn có đầu vào trường trong Sau đó sử dụng. CdkTrapFocus và cdkTrapFocusAutoCapture chỉ thị và sử dụng như thế này trong html và bộ tabIndex vào đầu vào:

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

Chúng tôi đã gặp một số vấn đề với trình đơn thả xuống của chúng tôi liên quan đến định vị và khả năng phản hồi và bắt đầu sử dụng OverlayModule từ cdk và phương pháp sử dụng A11yModule này hoạt động hoàn hảo.

Để thực hiện sau khi boolean đã thay đổi và tránh sử dụng thời gian chờ, bạn có thể làm:

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

constructor(private cd: ChangeDetectorRef) {}

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

Trong Angular, trong chính HTML, bạn có thể đặt tiêu điểm để nhập liệu khi nhấp vào nút.

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

<input #myInput></input>

Ngoài ra còn có một thuộc tính DOM được gọi là thuộc tính cdkFocusInitialphù hợp với tôi trên các đầu vào. Bạn có thể đọc thêm về nó ở đây: https://material.angular.io/cdk/a11y/overview

Chỉ sử dụng Mẫu Angular

<input type="text" #searchText>

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

html của thành phần:

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

bộ điều khiển của thành phần:

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

..và đừng quên nhập A11yModule từ @ angle / cdk / a11y

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

Cách dễ dàng hơn cũng là làm điều này.

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