Question

当我显示登录表单时，它会关注密码字段而不是电子邮件字段。我尝试了一些不同的解决方案，专注于电子邮件领域，但两者都不在页面之内。一个是＆＃34;自动对焦＆＃34;指令，内置于离子。我还找到了＆＃34; focuser＆＃34;指令：https://blog.thecodecampus.de/ionic-2-set-focus-input-element/

在这里，我点击电子邮件/密码打开表单以收集电子邮件和密码。表单打开时焦点是密码。我尝试了将聚焦器和自动聚焦添加到电子邮件指令的所有组合，它可以工作，但创建了一个不专业的生涩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

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

.html页面中的

将角度ID添加到特定元素，例如#my_input

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

Ionic2：当你进入页面时，如何选择要关注的输入？

2 个答案: