Mettre le focus sur une entrée avec Ionic 2

Question

SOLVÉ :

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) Importez "ViewChild".

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

2) Créez une référence à votre entrée dans votre modèle html :

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

3) Utilisez @ViewChild pour accéder au composant d'entrée que vous venez de référencer précédemment.

@ViewChild('focusInput') myInput ;

4) Déclencher la mise au point

Utilisez la méthode ionViewLoaded() pour la déclencher chaque fois que la vue/page est chargée.

setTimeout est nécessaire

  ionViewLoaded() {

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

 }

4) Afficher le clavier sur Android

import { Keyboard } from 'ionic-native';

Appelez Keyboard.show() pour appeler le clavier sur Android.

5) Afficher le clavier sur iOS

ajoutez cette ligne à votre config.xml pour le faire fonctionner sur iOS :

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

Avec l'aide du grand article de mhartington : http://mhartington.io/post/setting-input-focus/

Answer 1

Vous n'avez pas besoin d'importer l'entrée de 'angular/core'.

Tout simplement :

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);

 }

} 

Et répondant au commentaire de Ciprian Mocanu :

Il ne fonctionne pas sous iOS :(

Il fonctionne sur iOS -> vérifié sur iPhone 6 PLUS avec iOS 10

Answer 2

Je pense que vous devriez créer une directive globale pour cela, car vous souhaiterez probablement obtenir ce comportement plus d'une fois.

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)
      }
    }
}

Maintenant sur vous ion-input ajoutez simplement le champ autofocus attribut

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

Answer 3

Aucun des éléments ci-dessus ne fonctionnait pour moi. Voici comment j'ai résolu le problème :

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)
  }
 }
}

Ensuite, dans votre champ d'entrée d'ions, ajoutez simplement l'attribut autofocus :

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

Testé sur le navigateur et Android, pas encore sur IOS mais il n'y a aucune raison pour que cela ne fonctionne pas.

Answer 4

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>

Answer 5

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>