Set focus on an input with Ionic 2

Question

SOLVED :

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) Create a reference to your input in your html template :

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

3) Use @ViewChild to get access to the input component you just referenced previously.

@ViewChild('focusInput') myInput ;

4) Trigger the focus

Use the ionViewLoaded() method to trigger it each time the view/page is loaded.

setTimeout is needed

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

4) Show the keyboard on Android

import { Keyboard } from 'ionic-native';

Call Keyboard.show() to call the keyboard on Android.

5) Show the keyboard on iOS

add this line to your config.xml to make it work on iOS :

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

With the help from the great article of mhartington : http://mhartington.io/post/setting-input-focus/

Answer 1

You don't need to import the 'Input' from 'angular/core'.

Simply:

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

And answering comment to Ciprian Mocanu:

It does not work in iOS :(

It works on iOS -> checked on iPhone 6 PLUS with iOS 10

Answer 2

I think you should make a global directive for this as you will probably want this behavior more than once.

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

Now on you ion-input field just add the autofocus attribute

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