Ionic v4 - 如何自动聚焦输入？

Question

我有一个输入视图 <ion-input #codigobarras></ion-input>

如何自动关注此输入？

我试过什么

@ViewChild('codigobarras') input_codigobarras: Input;

...

ionViewDidEnter() {
    this.input_codigobarras.focus(); // didn't work = temp2.focus is not a function
    this.input_codigobarras.focus.emit(); // didn't work = do nothing, just returns undefined
    this.input_codigobarras.getElementRef().nativeElement.focus() // didn't work = do nothing, just returns undefined
    this.input_codigobarras.setFocus(); // didn't work = do nothing, just returns undefined
}

<ion-input [autofocus]></ion-input> <!-- Didn't work -->

Answer 1

这应该工作

<ion-input autofocus="true"></ion-input>

Answer 2

在您想要的时间和地点执行此操作的更通用的解决方案可能是：

<ion-input ... #inputId></ion-input>

因此，使用ViewChild控制器中的a ，您可以轻松地将焦点设置在：

@ViewChild('inputId', {static: false}) ionInput: { setFocus: () => void; };
...
setFocusOnInput() {
   this.ionInput.setFocus();
}

Answer 3

我在离子模式内的离子输入方面存在焦点冲突。事实上，在使用超时后，我意识到我的离子输入是聚焦的，并且立即失去聚焦。

setTimeout(() => this.ionInput.setFocus(), 100);

因此，我通过控制台记录 activeElement（聚焦的元素）：

文档.activeElement

控制台输出离子模式。

因此，我必须等待离子模式“完全加载”才能使用 setFocus ，如上所述。