我尝试了什么

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 wrok -->

Answer 1

更通用的解决方案可以在您希望的时间和地点进行：

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

因此，在控制器中使用ViewChild时，您可以轻松地将重点放在以下位置：

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

Answer 2

这应该有效

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

Answer 3

加载项目后，您可以尝试使用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 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（）

Ionic V4-如何自动聚焦于输入？

我尝试了什么

4 个答案: