Ionic2：您如何選擇頁面時要關注哪個輸入？

Question

當我顯示登錄表單時，它將重點放在密碼字段而不是電子郵件字段上。我嘗試了幾種不同的解決方案，專注於電子郵件領域，但他們都離開了頁面。一個是內置於離子的「自動聚焦」指令。我還發現了「調焦」指令這裏：https://blog.thecodecampus.de/ionic-2-set-focus-input-element/

這裏我單擊電子郵件/密碼以打開的形式，收集電子郵件地址和密碼。當窗體打開時，焦點在密碼上。我嘗試了將focuser和autofocus添加到電子郵件指令的所有組合，並且它可以工作，但會造成不專業的生澀UX;沒有準備好黃金時段。

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

首先，刪除所有你寫的自動對焦工作的代碼。因爲我無法訪問所有的代碼，所以無法幫到那裏。 另外，如果可能，請先在新頁面上嘗試此操作，然後嘗試將其集成到所需的登錄頁面中。

在html的，其中輸入的存在：添加ID標記。

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

在.TS：

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

讓我知道這是否正常工作。

Answer 2

可以實現通過使用離子視圖生命週期掛鉤這個角度來說，看到這個例子：

在.html頁面中.ts文件添加角度ID的特定元素這樣#my_input

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

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