将焦点放在 p-inputNumber

Question

我打开了一个 p-dialog，里面有一个 p-inputNumber，但是我没能把焦点放在上面。

如您所见，我尝试设置自动对焦，但它不起作用。焦点保留在我按下以打开对话框的按钮上。我能怎么做？谢谢

<p-dialog header="Title" [(visible)]="displayModal" [modal]="true" [style]="{width: '40vw'}"
  [baseZIndex]="10000" [draggable]="false" [resizable]="false" [closable]="false">
  <p class="p-m-0">
    <p-inputNumber size=3 [(ngModel)]="field" maxlength="3" autofocus></p-inputNumber>
  </p>
  <ng-template pTemplate="footer">
    <button >Ok</button>
  </ng-template>
</p-dialog>

Answer 1

首先，添加对输入的引用，以便通过 ViewChild:

从 typescript 对其进行操作

<p-inputNumber size=3 [(ngModel)]="field" maxlength="3" #input></p-inputNumber>

和

@ViewChild("input") elm;

然后，一旦对话框出现，使用 onShow 方法将焦点设置到此输入：

(onShow)="setFocus()"

和

setFocus() {
    this.elm.input.nativeElement.focus();
}

见demo

将焦点放在 p-inputNumber

Set focus on p-inputNumber

focus

autofocus

typescript

primeng

angular