web-dev-qa-db-fra.com

Définir le focus sur une entrée avec Ionic 2

RESOLU: 

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) importer "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 avez précédemment référencé.

@ViewChild('focusInput') myInput ;

4) Déclenche le focus

Utilisez la méthode ionViewLoaded () pour la déclencher chaque fois que la vue/la 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 sous Android

import { Keyboard } from 'ionic-native';

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

5) Afficher le clavier sur iOS

ajoutez cette ligne à votre fichier 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/

inputfocusionic2setfocusautofocus
42
Thomas

Vous n'avez pas besoin d'importer le 'Input' de 'angular/core'.

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 à Ciprian Mocanu:

Cela ne fonctionne pas sous iOS :(

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

11
Mateusz Mateja

Je pense que vous devriez faire une directive globale pour cela car vous voudrez probablement 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 votre champ ion-input, ajoutez simplement l'attribut autofocus

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

Aucune de ces réponses ne fonctionnait pour moi. Voici comment j'ai résolu:

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 IOS mais aucune raison pour que cela ne fonctionne pas.

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>
1
Marcos Carneiro Lima

J'ai trouvé cette solution pour résoudre également le problème que le clavier repousse le contenu.

<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

Si vous devez définir le focus sur une entrée au niveau du composant init, définissez la classe input-has-focus par défaut sur ion-item comme suit:

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

C'est tout!

0
ThonyFD

Pour IOS et Android, tout va bien pour moi. mettez le code de focus dans 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 
}

Balise d'entrée dans un fichier html 

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

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

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

Dans mon cas, pour une raison quelconque, ionViewLoaded () ne s'est pas déclenché. J'ai essayé ionViewDidLoad () et mis la minuterie à 200 et cela a fonctionné.

150 s'est avéré trop tôt pour moi. Solution complète:

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

Et sur la balise input:

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