使用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()方法触发它.

需要setTimeout

  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

您无需从'angular/core'导入'Input'.

只是:

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的评论:

它在iOS中不起作用:(

它适用于iOS - >使用iOS 10在iPhone 6 PLUS上查看

Answer 2

我认为您应该为此制定一个全局指令,因为您可能不止一次想要这种行为.

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

现在在你的ion-input字段上添加autofocus属性

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

Answer 3

以上都不适合我.以下是我的解决方法:

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

然后在你的离子输入字段中添加autofocus属性:

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

在浏览器和Android上测试不是IOS,但没有理由它不应该工作.

Answer 4

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>