Question

我必须将输入集中在模态的加载上，但如果我使用html5属性autofocus，它似乎无效。是否可以使其有效？

<div class="col-md-6">
 <div class="form-group label-floating">
  <label class="control-label">
    {{'ticketbundle.busroutedetail.dialog.labels.buslinename'
     | translate }}<span class="star">*</span>
   </label><input autofocus class="form-control" id="name" required
   [(ngModel)]="busRouteDetail.name" name="name" #busRouteDetailname>
 </div>
</div>

我正在使用角材料2

Answer 1

如果您正在使用“材料”对话框，则可以使用cdk-focus-initial指定初始焦点的位置。

<input cdk-focus-initial type="text">

请参阅此EXAMPLE。

Answer 2

您可以使用#myInput设置本地模板引用并在ts文件中使用@ViewChild() myInput访问该元素，并在钩子ngAfterViewInit中获取本机元素并设置焦点属性 this.myInput.nativeElement.focus()

另一种选择是构建一个焦点指令并将其绑定到元素like this的焦点属性

Answer 3

您可以在要聚焦的元素上设置 ngbAutofocus。

见https://ng-bootstrap.github.io/#/components/modal/examples#focus

模态角度4中的自动对焦不起作用

3 个答案: