无法聚焦 ionic2 中的输入字段

Question

在我的代码片段中，我尝试为第一个输入文本字段设置焦点。但是当页面加载时，它会变得专注并突然失去焦点并关闭键盘。 谁能告诉我实现这一目标。

<ion-input [(ngModel)]="username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off" autofocus clearInput required></ion-input>

Answer 1

添加带有 (#( 的视图引用 在您的 html 中，

<ion-input [(ngModel)]="username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off" autofocus clearInput required  #focusInput></ion-input>

在您的组件.ts中导入ViewChild并设置此(#focusInput(输入的焦点

喜欢

import {Component, ViewChild} from '@angular/core';
@ViewChild('focusInput') myInput;
ionViewDidEnter() {
this.myInput.setFocus();
}

这会有所帮助。

Answer 2

<input #exampleInput />

@ViewChild('exampleInput') exampleInput: ElementRef;
setTimeout(() => {
this.exampleInput.nativeElement.focus();
}, 300);

这对我有用。

注意：您可能希望在ngAfterViewInit方法或其他地方使用此超时，在我的测试设备中，300毫秒延迟听起来足够了。