时间戳

首页 > 解决方案 > 将焦点放在 p-inputNumber

angular - 将焦点放在 p-inputNumber

问题描述

我打开一个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>

标签： angulartypescriptfocusprimengautofocus

解决方案

首先，添加对您的输入的引用，以便通过以下方式从 typescript 操作它ViewChild：

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

和

@ViewChild("input") elm;

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

(onShow)="setFocus()"

和

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

看演示

推荐阅读