Setting Focus to an Input in Ionic

Ionic Framework ionic-v3
4

SOLVED :

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

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

  constructor(private navCtrl: NavController) { }

  ionViewLoaded() {

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

 }

}

1) import “Input”, “ViewChild” and “NavController”

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

2) Create a reference to your input in your template :

<ion-input #input>

@ViewChild('input') myInput ;

3) Trigger the focus

  ionViewLoaded() {

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

 }

4) Show the keyboard

add this line to your config.xml :

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

38 Likes