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

加载项目后，您可以尝试使用 ngOnChanges() 触发 ElementRef

 @ViewChild('test') test: ElementRef;

 ngOnChanges(changes: SimpleChanges){
     if(changes.items) {
     this.test.nativeElement.firstChild['autofocus'] = 'true';
   }
}

和你的html

<div #test>
  <ion-input ></ion-input>
</div>

Answer 3

一个更通用的解决方案可以在您需要的时间和地点执行此操作：

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

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

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

Answer 4

离子 4/5

HTML

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

TS

export class SomePage {
....
@ViewChild('inputId', {static: false}) inputEl: IonInput;
....

focusOnElement() {
    this.tipDesc.setFocus();
}

离子 3

@ViewChild('inputId') inputEl: TextInput;

当你想专注于输入时调用 focusOnElement()

Answer 5

关于离子模态内的离子输入，我有一个焦点冲突。事实上，在使用超时后，我意识到我的离子输入是聚焦的，并且瞬间没有聚焦。

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

因此，我使用控制台记录 activeElement（重点关注的那个）：

document.activeElement

并且控制台输出 ion-modal。

因此，我必须等待 ion-modal 被“完全加载”才能使用 setFocus，如上所述。

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

Ionic v4 - how do I autofocus on a Input?

autofocus

ionic4

我尝试了什么