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

当我显示登录表单时，它关注的是密码字段而不是电子邮件字段。我尝试了几种不同的解决方案来专注于电子邮件领域，但它们都超出了页面。一个是内置在ionic中的“自动聚焦”指令。我还在这里找到了“focuser”指令：

在这里，我单击电子邮件/密码打开表单以收集电子邮件和密码。表单打开时，焦点是密码。我尝试了将焦点和自动焦点添加到电子邮件指令中的所有组合，它可以工作，但会产生不专业的用户体验；还没有为黄金时间做好准备

HTML

登录或注册。
使用Facebook或您的电子邮件和密码开始



联外通


电子邮件/密码


忘记密码？


注销
电子邮件地址


密码


加入表示您同意现金通行证条款和隐私政策
立即登录/加入


忘记密码？

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

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

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

在.ts中：

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

ngAfterViewInit（）{
var input=document.getElementById（'input'）；
日志（“输入：”，输入）；
input.focus（）；
}

---

让我知道这是否有效。

您可以通过使用Ionic view生命周期挂钩实现这种角度方式，请参见以下示例：

在

.html

页面中，向特定元素添加角度id，如下

#my_input

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

---

谢谢你的反馈，但我得到的输入为空。我不清楚你的意思是什么：“删除为自动对焦工作而编写的所有代码。仍在进行中，因此如果您能增加一些清晰度，我将不胜感激，否则我将继续修补。删除您以前尝试过的所有代码以使自动对焦正常工作。如果你还是不明白，那就先在另一页上试试看。另外，您是否在标签中添加了

id=“input”

？另外，我刚刚观察到您在表单的

ngIf

中签入了

formActive

标志。你在哪里设置它为真？这也会影响自动对焦。我猜您在点击

Show Form

按钮后将其设置为true。在这种情况下，在将

formActive

设置为true后，在方法

showForm（）

中移动

ngAfterViewInit（）的此代码。感谢您的尝试，但当我添加您描述的代码时，我始终会得到“无法读取未定义的属性“setFocus”。登录页面是一个模式，这可能是一个问题吗？我使用*ngIf显示表单，这样我在显示表单时可以调用focus？有办法做到这一点吗？
<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);
  }