web-dev-qa-db-ja.com

Ionic 2で入力にフォーカスを設定します

解決しよう：

import { Component, ViewChild} from '@angular/core';
import { Keyboard } from 'ionic-native';


@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  @ViewChild('input') myInput ;

  constructor() {}

  ionViewDidLoad() {

    setTimeout(() => {
      Keyboard.show() // for Android
      this.myInput.setFocus();
    },150);

 }

}

1）import "ViewChild"

import {Component, ViewChild} from '@angular/core';

2）htmlテンプレートに入力への参照を作成します：

<ion-input #focusInput></ion-input>

3）@ViewChildを使用して、先ほど参照したばかりの入力コンポーネントにアクセスします。

@ViewChild('focusInput') myInput ;

4）フォーカスをトリガーする

IonViewLoaded（）メソッドを使用して、ビュー/ページがロードされるたびにトリガーします。

setTimeoutが必要です

  ionViewLoaded() {

    setTimeout(() => {
      Keyboard.show() // for Android
      this.myInput.setFocus();
    },150); //a least 150ms.

 }

4）Androidでキーボードを表示

import { Keyboard } from 'ionic-native';

Keyboard.show（）を呼び出して、Androidでキーボードを呼び出します。

5）iOSでキーボードを表示する

config.xmlに次の行を追加して、iOSで動作するようにします。

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

mhartingtonの素晴らしい記事の助けを借りて： http://mhartington.io/post/setting-input-focus/

inputfocusionic2setfocusautofocus
45
Thomas

「入力」を「角度/コア」からインポートする必要はありません。

単に：

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

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  @ViewChild('input') myInput: TextInput;

  constructor(private navCtrl: NavController) { }

  ionViewDidLoad() {

    setTimeout(() => {
      this.myInput.setFocus();
    },150);

 }

}

そして、Ciprian Mocanuへのコメントへの回答：

IOSでは機能しません:(

IOSで動作します-> iOS 10を搭載したiPhone 6 PLUSでチェック済み

12
Mateusz Mateja

おそらくこの動作が複数回必要になるため、このためのグローバルディレクティブを作成する必要があると思います。

import {  ViewChild, ElementRef, Directive, OnInit } from '@angular/core';
import { Keyboard } from 'ionic-native';

@Directive({
    selector: '[autofocus]'
})
export class FocusInput implements OnInit {
    @ViewChild('myinput') input
    private focused: boolean
    ngOnInit(){
      this.focused = true
    }
    ionViewDidLoad() {
      if (this.focused) {
        setTimeout(()=>{
          this.input.setFocus()
          this.focused = false
          Keyboard.show()
        }, 300)
      }
    }
}

ion-inputフィールドにautofocus属性を追加してください

<ion-input #myinput type="..." placeholder="..."
            (keyup.enter)="someAction()"
            autofocus ></ion-input>
7
davejoem

上記のどれも私のために働いていませんでした。ここに私が解決した方法があります：

import {  ElementRef, AfterViewChecked, Directive } from '@angular/core';
import {Keyboard} from 'ionic-native';

@Directive({
    selector: '[autofocus]'
})
export class FocusInput implements AfterViewChecked {
    private firstTime: boolean = true;
    constructor(public elem: ElementRef) {
}

ngAfterViewChecked() {
  if (this.firstTime) {
    let vm = this;
    setTimeout(function(){

    vm.elem.nativeElement.firstChild.focus();
    vm.firstTime = false;
    Keyboard.show();

    }, 300)
  }
 }
}

次に、イオン入力フィールドにautofocus属性を追加します。

 <ion-input #input type="text" placeholder="..."
            [(ngModel)]="myBoundVariable"
            (keyup.enter)="myEnterKeyAction()"
            autofocus></ion-input>

ブラウザとAndroidではなくIOSでまだテスト済みですが、動作しない理由はありません。

6
Eric G
import {Component, ViewChild} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  @ViewChild('Comment') myInput ;

  constructor(private navCtrl: NavController) { }

  ionViewLoaded() {

    setTimeout(() => {
      this.myInput.setFocus();
    },150);

 }

}
Create a reference to your input in your template :

<ion-input #Comment>
5
Kanomdook
import {Component,ViewChild} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  @ViewChild('myInput') myInput ;

  constructor(private navCtrl: NavController) { }

  ionViewDidLoad() {

    window.setTimeout(() => {
      this.myInput.setFocus();
    }, 600); //SET A LONG TIME IF YOUR ARE IN A MODAL/ALERT

  }

}

<ion-input #myInput ></ion-input>
3
Marcos Carneiro Lima

この解決策は、キーボードがコンテンツを押しのけてしまうという問題も解決することがわかりました。

<ion-list>
<ion-item>
  <ion-label>Name</ion-label>
  <ion-input #inputRef type="text"></ion-input>
</ion-item>
<button ion-button (click)="focusMyInput(inputRef)">Focus</button>

  @ViewChild(Content) content: Content;

  focusMyInput(inputRef) {
    const itemTop = inputRef._elementRef.nativeElement.getBoundingClientRect().top;
    const itemPositionY = this.content.scrollTop + itemTop -80;

    this.content.scrollTo(null, itemPositionY, 500, () => {
      inputRef.setFocus();
    });
  }
1
D.Roters

Initコンポーネントの入力にフォーカスを設定する必要がある場合、デフォルトでクラスinput-has-focusを次のようにion-itemに設定します。

<ion-item class="input-has-focus">

それで全部です！

0
ThonyFD

IOSおよびAndroidの場合、私にとってはうまくいきます。 ionViewWillEnter（）にフォーカスコードを配置します。

import { Component, ViewChild, ElementRef } from '@angular/core';
 import { Keyboard } from '@ionic-native/keyboard';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 @ViewChild("Input") inputEl: ElementRef;
 constructor(public keyboard:Keyboard){}

 ionViewWillEnter() { 
    setTimeout(() => {           
      this.inputEl.nativeElement.focus();
      this.keyboard.show();    
    }, 800); //If its your first page then larger time required 
}

HTMLファイルの入力タグ

 <ion-input type="text" #Input></ion-input>

そして、この行をconfig.xmlに追加して、iOSで動作するようにします。

<preference name="KeyboardDisplayRequiresUserAction" value="false" />
0
Jaydeep Kataria

私の場合、何らかの理由で、ionViewLoaded（）がトリガーされませんでした。 ionViewDidLoad（）を試行し、タイマーを200に設定すると動作しました。

150は私には早すぎた。完全なソリューション：

import { Component, ViewChild } from '@angular/core';//No need to import Input

export class HomePage {

  @ViewChild('inputToFocus') inputToFocus;
  constructor(public navCtrl: NavController) {}

  ionViewDidLoad()
  {
    setTimeout(() => {
      this.inputToFocus.setFocus();
    },200)
  }  
}

そして、入力タグで：

<ion-input type="text" #inputToFocus></ion-input>
0
alchi baucha