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