input - 使用 Ionic 2 将焦点设置在输入上

Question

已解决:

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)导入“ViewChild”
import {Component, ViewChild} from '@angular/core';
2) 在 html 模板中创建对输入的引用:

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

3) 使用@ViewChild 访问您之前引用的输入组件。
@ViewChild('focusInput') myInput ;
4)触发焦点

使用 ionViewLoaded() 方法在每次加载 View /页面时触发它。

需要设置超时

  ionViewLoaded() {

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

 }

4)在Android上显示键盘
import { Keyboard } from 'ionic-native';
调用 Keyboard.show() 在 Android 上调用键盘。

5) 在 iOS 上显示键盘

将此行添加到您的 config.xml 以使其在 iOS 上工作:
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
在 mhartington 的精彩文章的帮助下: http://mhartington.io/post/setting-input-focus/

Answer 1

您不需要从“角度/核心”导入“输入”。

简单地:

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

 }

} 

并回答 Ciprian Mocanu 的评论:

It does not work in iOS :(

它适用于 iOS -> 在 iPhone 6 PLUS 和 iOS 10 上检查