각도 2 +/Ionic2 +

Question

의 이온 입력에서 포커스를 제거하는 방법 nativeEloment의 setFocus 메서드를 사용하여 포커스를 설정할 수 있습니다.

그러나 초점을 제거하는 방법은 무엇입니까?

어떻게 Angular 2 +/Ionic 3 앱에서 템플릿의 입력을 취소하고 커서에서 해당 입력을 선택 취소 할 수 있습니까?

입력에 포커스가있는 동안 모바일 키보드가 열리기 때문에 포커스를 제거해야합니다.

편집 : 입력은 Ionic2 +의 이온 입력입니다.

Answer 1

1) 구성 요소의 템플릿에 입력 템플릿 변수 참조를 추가

<ion-input #textInput> 

2) 구성 요소의 수입에 ElementRef 및 ViewChild을 추가

import { ElementRef, ViewChild } from '@angular/core' 

3) @ViewChild 변수를 추가 관련 메소드를 컴포넌트에 추가하십시오.

export class AppComponent { 

    @ViewChild('textInput') textInput; 

    setFocus() { 
    this.textInput.nativeElement.focus(); 
    } 

    removeFocus() { 
    this.textInput.nativeElement.blur(); 
    } 

} 

여러 가지 방법으로 setFocus() 또는 removeFocus()을 트리거 할 수 있습니다. 다음은 그 예입니다.

# app.component.html 

<ion-input #textInput> 

# app.component.ts 

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

export class AppComponent { 

    [previous code elided for readability] 

    isInputActive: boolean; 

    @HostListener('document:click', ['$event']) 
    handleClickEvent(event: MouseEvent): void { 
    if (document.activeElement !== this.textInput.nativeElement) { 
     this.textInput.nativeElement.blur(); 
    } 
    } 
}