Question

我已经进行了预先输入，可以使用hostlistner来监听焦点，然后激活对输入的焦点：

<input #inputField type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="emitResult($event)"/>
<ng-template #rt let-r="result" let-t="term">
  {{r[displayKey]}}
</ng-template>

我专注于聆听并通过以下方式设置焦点：

@ViewChild('inputField') inputField: ElementRef;
  @HostListener('focus') focusIn() {
    if (!this.focused) {
      setTimeout(() => {
        this.focused = true;
        this.inputField.nativeElement.focus();
      });
    }
  }

我遇到的问题是它弄乱了父视图中的tabindex。

<div class="col-12">
        <label for="sw">SW</label>
        <shrd-typeahead id="sw" autoFocus [data]="swList" [filterKey]="'name'" [displayKey]="'name'" (result)=selectedSw($event)
          tabindex="1"></shrd-typeahead>
      </div>

      <div class="col-12">
        <label for="amount">Amount</label>
        <input type="text" class="form-control" id="amount" [(ngModel)]="amount" tabindex="2">
      </div>

所以我可以毫无问题地设置焦点。但是，当我在列表中选择SW后按“ tab”时，我将进入chrome导航，而不是进入下一个输入字段。：S 有没有解决这个问题的灵巧解决方案？

br

专注于子组件之后，Tabindex无法正常工作

0 个答案: