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/
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