input - Establecer el foco en una entrada con Ionic 2

ionic focus input scroll

Question

SOLUCIONADO

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) importar "ViewChild"

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

2) Crea una referencia a tu entrada en tu plantilla html:

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

3) Use @ViewChild para obtener acceso al componente de entrada al que acaba de hacer referencia.

@ViewChild(''focusInput'') myInput ;

4) desencadenar el foco

Use el método ionViewLoaded () para activarlo cada vez que se carga la vista / página.

setTimeout es necesario

  ionViewLoaded() {

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

 }

4) Mostrar el teclado en Android

import { Keyboard } from ''ionic-native'';

Llame a Keyboard.show () para llamar al teclado en Android.

5) Mostrar el teclado en iOS

agregue esta línea a su config.xml para que funcione en iOS:

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

Con la ayuda del gran artículo de mhartington: http://mhartington.io/post/setting-input-focus/

Answer 1

Creo que deberías hacer una directiva global para esto, ya que probablemente quieras este comportamiento más de una vez.

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

Ahora en tu campo de ion-input simplemente agrega el atributo de autofocus

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

Answer 2

En mi caso, por alguna razón, ionViewLoaded () no se activaba. Intentó ionViewDidLoad () y configuró el temporizador en 200 y funcionó.

150 resultó demasiado temprano para mí. Solución completa:

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

Y en la etiqueta de entrada:

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

Answer 3

Encontré que esta solución también soluciona el problema de que el teclado está alejando el contenido.

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

Answer 4

Ninguno de los anteriores estaba funcionando para mí. Así es como resolví:

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

Luego, en su campo de entrada de iones solo agregue el atributo de enfoque automático:

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

Probado en el navegador y Android, no iOS, pero no hay razón por la que no debería funcionar.

Answer 5

No necesita importar la ''Entrada'' desde ''angular / core''.

Simplemente:

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

 }

} 

Y respondiendo al comentario de Ciprian Mocanu:

No funciona en iOS :(

Funciona en iOS -> comprobado en iPhone 6 PLUS con iOS 10

Answer 6

Para iOS y Android funciona bien para mí. poner el código de enfoque en 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 
}

Etiqueta de entrada en el archivo html

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

Y agregue esta línea a su config.xml para que funcione en iOS:

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

Answer 7

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 8

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>