<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 리스너를 보유한 다음 다시 적용하거나 자바 스크립트를 통해 초점을 맞추면 극복 할 수 있습니다.

이 지시문은 표시되는 즉시 요소의 텍스트에 초점을 맞추고 선택합니다. 경우에 따라 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);
    }
  }
}

이것은 setTimeout없이 Angular 8에서 작동합니다.

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이 작동하는 것과 같은 이유이지만 Angular에서 setTimeout을 실행하면 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>

위치 지정 및 응답 성과 관련하여 드롭 다운에 몇 가지 문제가 있었고 대신 cdk에서 OverlayModule을 사용하기 시작했으며 A11yModule을 사용하는이 방법은 완벽하게 작동합니다.

Angular에서는 HTML 자체에서 버튼 클릭시 입력에 포커스를 설정할 수 있습니다.

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

<input #myInput></input>

부울이 변경된 후 실행을 수행하고 시간 초과 사용을 방지하려면 다음을 수행 할 수 있습니다.

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

constructor(private cd: ChangeDetectorRef) {}

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

cdkFocusInitial입력에 대해 나를 위해 작동 하는 DOM 속성도 있습니다. 자세한 내용은 https://material.angular.io/cdk/a11y/overview에서 확인할 수 있습니다.

Angular 템플릿 만 사용

<input type="text" #searchText>

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

구성 요소의 html :

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

구성 요소의 컨트롤러 :

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

.. @ angular / cdk / a11y 에서 A11yModule 가져 오기를 잊지 마세요.

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

나는 같은 시나리오를 가지고 있는데, 이것은 나를 위해 일했지만 당신이 가지고있는 "숨기기 / 표시"기능이 없습니다. 따라서 필드를 항상 볼 수있을 때 초점이 맞는지 먼저 확인한 다음 가시성을 변경할 때 작동하지 않는 이유를 해결하려고 시도 할 수 있습니다 (아마 수면 또는 약속을 적용해야하는 이유 일 것입니다).

포커스를 설정하려면 다음과 같이 변경해야합니다.

HTML 매트 입력은 다음과 같아야합니다.

<input #yourControlName matInput>

TS 클래스에서 변수 섹션 (

export class blabla...
    @ViewChild("yourControlName") yourControl : ElementRef;

귀하의 버튼은 괜찮습니다.

  showSearch(){
       ///blabla... then finally:
       this.yourControl.nativeElement.focus();
}

그리고 그게 다야. 내가 찾은이 게시물 에서이 솔루션을 확인할 수 있으므로-> https://codeburst.io/focusing-on-form-elements-the-angular-way-e9a78725c04f 덕분에

더 쉬운 방법은 이것을하는 것입니다.

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