Ionic2：当您来到页面时，您如何选择要关注的输入？

Question

当我显示登录表单时，它会关注密码字段而不是电子邮件字段。我尝试了几种不同的解决方案来专注于电子邮件领域，但它们都离开了页面。一种是内置于 ionic 中的“自动对焦”指令。我还在这里找到了“focuser”指令：https://blog.thecodecampus.de/ionic-2-set-focus-input-element/

在这里我点击电子邮件/密码打开表格以收集电子邮件和密码。当表单打开时，重点是密码。我尝试了将焦点和自动对焦添加到电子邮件指令的所有组合，它有效，但创建了一个不专业的生涩的用户体验；还没准备好迎接黄金时段。

HTML

<ion-content>
  <br>
  <h1 class="newheadertwo">Sign in or sign up.</h1>
  <p class="p2">Use Facebook or your email and password to get started.</p>
  <br><br>
      <ion-list no-lines *ngIf="!formActive">
      <ion-grid>
        <ion-row>
          <ion-col>
            <button class="fb-button" (click)="FBLogin()">Facebook Connect</button>
            <br>
            <button class="signup-button" (click)="showForm()">Email / Password</button>
            <br>
            <a (click)="password-retrieve" (click)="forgotPassword()">Forget your password?</a>
            <br>
            <button *ngIf="person" class="login-button-two" (click)="logout()">Log Out</button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-list>

    <form (ngSubmit)="signUpLogin()" *ngIf="formActive">
      <ion-list class="clearbackground">
        <ion-item>
          <ion-label floating class="input-label">Email Address</ion-label>
          <ion-input [(ngModel)]="email" required="required" type="email" maxlength="200" name="email"></ion-input>
        </ion-item>
        <br>
        <ion-item>
          <ion-label floating class="input-label">Password</ion-label>
          <ion-input [(ngModel)]="password" required="required" type="password" maxlength="200" name="password"></ion-input>
        </ion-item>
        <br>
        <p class="p3">By joining, you agree to the CashPass <a (click)="terms()">Terms</a> and <a (click)="privacy()">Privacy Policy</a>.</p>
      </ion-list>
      <button type="submit" class="signup-button">Sign in  /  Join now</button>
    </form>
   <br>
  <ion-row *ngIf="formActive">
    <ion-col>
      <a (click)="password-retrieve" (click)="forgotPassword()">Forget your password?</a>
    </ion-col>
  </ion-row>
</ion-content>

Answer 1

您可以通过使用 Ionic 视图生命周期钩子来实现这种 Angular 方式，请参见以下示例：

在.html 页面中，像这样#my_input 向特定元素添加角度ID

<ion-input #my_input [(ngModel)]="email" required="required" type="email" maxlength="200" name="email"></ion-input>

在.ts 文件中

@Component(...)
export class Page {
  // ion-input is just a component implemented in ionic, so you can get its object using @ViewChild decorator 
  @ViewChild('my_input') myInput: any;

  constructor(...){}

  // this hook is called when the page/component is ready and displayed
  // you can use also angular hooks (ngOnInit, ...) and you can put it in the constructor
  ionViewDidEnter(){
      // use setTimeout to make sure that the page is rendered and to avoid webView lag in android
      setTimeout(() => {
         this.myInput.setFocus();
      }, 300);
  }

Answer 2

首先，删除您为自动对焦工作而编写的所有代码。因为，我无法访问所有代码，所以无法提供帮助。 此外，如果可能，请先在新页面上尝试此操作，然后尝试将其集成到所需的登录页面中。

在 .html 中，存在输入：向标签添加 id。

<ion-input id="input" ....></ion-input>

在 .ts 中：

ngAfterViewInit(){
    var input = <HTMLInputElement>document.getElementById('input');
    console.log("Input :",input);
    input.focus();
}

让我知道这是否有效。