用Ionic 2设置输入焦点 [英] Set focus on an input with Ionic 2

问题描述

解决方案：

$ b

 从'@ angular / core'导入{Component，ViewChild} 
从'ionic-native'导入{Keyboard}; 
 
 $ b @Component（{
 templateUrl：'build / pages / home / home.html'
}）
 export class主页{
 @ViewChild（'input'）myInput; 
 $ b构造函数（）{} 
 
 ionViewDidLoad（）{
 
 setTimeout（（）=> {
 Keyboard.show（） //对于android 
 this.myInput.setFocus（）; 
}，150）; 
 
 
 
 
 
 
  1）从@ angular / core导入ViewChild 
 
 
 
 导入{Component，ViewChild};   
 
  
 
  pre> < ion-input＃focusInput>< / ion-input> 
  

3）使用@ViewChild来访问刚才引用的输入组件。 / strong>



@ViewChild（'focusInput'）myInput;

4）触发焦点

每次加载视图/页面时，使用ionViewLoaded（）方法触发它。

需要setTimeout

  ionViewLoaded（）{
 
 setTimeout（（）=> {
 Keyboard.show（）//对于android 
 this.myInput.setFocus（） ; 
}，150）; //至少150ms 
 
 
 
 
 
 
  4）在Android上显示键盘 
 $ b 
 从ionic-native导入{Keyboard};  
 
 
 
调用Keyboard.show（）在Android上调用键盘。 
 
 $ b 
  5）在iOS上显示键盘  
 
 
将此行添加到您的配置.xml使它在iOS上工作：
 
 
 
 < preference name =KeyboardDisplayRequiresUserActionvalue =false/>  
 $ p $在mhartington的伟大文章的帮助下： http://mhartington.io/post/setting-input-focus/   
    方案

您不需要从'angular / core'输入'Input'。



简单地说：

 从'@ angular / core'导入{Component，ViewChild}; 
从'ionic-angular'导入{NavController}; 
 $ b @Component（{
 templateUrl：'build / pages / home / home.html'
}）
 export class主页{
 @ViewChild 'input'）myInput; 
 
构造函数（private navCtrl：NavController）{} 
 
 ionViewDidLoad（）{
 
 setTimeout（（）=> {
 this .myInput.setFocus（）; 
}，150）; 
 
 
 
 
 
 
 
回答评论到Ciprian Mocanu：
 
lockquote 
 
它在iOS中不起作用：
 
它适用于iOS  - >使用iOS 10在iPhone 6 Plus上检查
 
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/
解决方案
You don't need to import the 'Input' from 'angular/core'.

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

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

  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

                        
这篇关于用Ionic 2设置输入焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！