使用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

设置超时对我有用！

setTimeout(() => {
    this.inputToFocus.setFocus();
}, 800); 

但是，如果添加了新的输入元素，它会将焦点设置为仅第一个输入。

Answer 3

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

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 4

以上都不适合我。以下是我的解决方法：

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 5

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>

Answer 6

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

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

  constructor(private navCtrl: NavController) { }

  ionViewDidLoad() {

    window.setTimeout(() => {
      this.myInput.setFocus();
    }, 600); //SET A LONG TIME IF YOUR ARE IN A MODAL/ALERT

  }

}

<ion-input #myInput ></ion-input>

Answer 7

我发现这个解决方案也解决了键盘推送内容的问题。

<ion-list>
<ion-item>
  <ion-label>Name</ion-label>
  <ion-input #inputRef type="text"></ion-input>
</ion-item>
<button ion-button (click)="focusMyInput(inputRef)">Focus</button>

  @ViewChild(Content) content: Content;

  focusMyInput(inputRef) {
    const itemTop = inputRef._elementRef.nativeElement.getBoundingClientRect().top;
    const itemPositionY = this.content.scrollTop + itemTop -80;

    this.content.scrollTo(null, itemPositionY, 500, () => {
      inputRef.setFocus();
    });
  }

Answer 8

在我的情况下，由于某种原因，ionViewLoaded（）没有被触发。尝试ionViewDidLoad（）并将计时器设置为200，它工作。

150对我来说太早了。完整解决方案

import { Component, ViewChild } from '@angular/core';//No need to import Input

export class HomePage {

  @ViewChild('inputToFocus') inputToFocus;
  constructor(public navCtrl: NavController) {}

  ionViewDidLoad()
  {
    setTimeout(() => {
      this.inputToFocus.setFocus();
    },200)
  }  
}

并在输入标签上：

<ion-input type="text" #inputToFocus></ion-input>

Answer 9

对于IOS和Android来说，它对我来说很好。将焦点代码放在ionViewWillEnter（）中。

import { Component, ViewChild, ElementRef } from '@angular/core';
 import { Keyboard } from '@ionic-native/keyboard';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 @ViewChild("Input") inputEl: ElementRef;
 constructor(public keyboard:Keyboard){}

 ionViewWillEnter() { 
    setTimeout(() => {           
      this.inputEl.nativeElement.focus();
      this.keyboard.show();    
    }, 800); //If its your first page then larger time required 
}

在html文件中输入标签

 <ion-input type="text" #Input></ion-input>

并将此行添加到config.xml以使其在iOS上运行：

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

Answer 10

如果需要将焦点设置在init组件的输入上，请将类input-has-focus默认设置为ion-item，如下所示：

<ion-item class="input-has-focus">

就这样！