web-dev-qa-db-ja.com

Angular 2 + / Ionic2 +のイオン入力からフォーカスを削除する方法

NativeElomentのsetFocusメソッドを使用してフォーカスを設定することができます。

しかし、フォーカスを削除するのはどうですか？

Angular 2 +/Ionic 3アプリで、テンプレートからカーソルを削除し、入力の選択を解除するにはどうすればよいですか？

入力にフォーカスがある間、モバイルキーボードは開いたままなので、フォーカスを削除する必要があります。

編集：入力はIonic2 +のイオン入力です。

angularmobileinputionic2focus
5
Natanael

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();
    }
  }
}
_
6
Zach Newburgh

Ionic 4ユーザーの場合;）

検索入力のキーボードを閉じる/非表示にする複数のソリューションを試した後、私はあなたのソリューション@ zach-newburghからインスピレーションを得た方法を見つけました。

動作していませんでした：

  • this.keyboard.hide()
  • #searchInput (keyup.enter)="searchInput.blur()"
  • this.searchInput.nativeElement.blur();
  • this.searchInput.getElementRef().nativeElement.blur();

有効なソリューションのみ

this.searchInput._native.nativeElement.blur();

完全なソリューション

TSウェイ

ts

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { TextInput } from 'ionic-angular';

...

@ViewChild('searchInput') searchInput: TextInput;

...

onSearchEnter() {
    this.searchInput._native.nativeElement.blur();
}

html

<ion-input #searchInput
           type="search"
           (keyup.enter)="onSearchEnter()"
           [(ngModel)]="searchQuery"></ion-input>

HTMLと最速の方法

html

<ion-input #searchInput
           type="search"
           (keyup.enter)="searchInput._native.nativeElement.blur()"
           [(ngModel)]="searchQuery"></ion-input>

それが役立つことを願っています。

2
Quentame