在 Angular 组件中通过 nativeElement.focus() 控制 Tab 键顺序答案

【问题标题】：Controlling tab order via nativeElement.focus() from within an Angular component在 Angular 组件中通过 nativeElement.focus() 控制 Tab 键顺序
【发布时间】：2020-12-31 21:58:18
【问题描述】：

我需要循环浏览扩展的覆盖控件。一旦覆盖层展开，我想循环输入元素，直到覆盖层被折叠。我的代码工作到一定程度，即一旦覆盖层可见，我的焦点就会设置到第一个输入元素并循环到最后一个“按钮”元素。

我的问题是我添加的代码以便我可以在展开的叠加层周围循环没有按预期工作。

这段代码 sn -p 最初将焦点设置到第一个输入元素

@ViewChild('focusShortCode', { static: true }) nameField: ElementRef;
public setFocus(isSet: boolean) {
        if (isSet) {
          this.nameField.nativeElement.focus();
        }
      }

这段代码 sn-p 应该将焦点再次设置回第一个输入元素

 public onBlur(isSet: boolean) {
    if (isSet) {
      this.nameField.nativeElement.focus();
    }
  }

问题是当调用“onBlur”时，我的焦点会跳转到展开的叠加层中的第二个输入元素

onblur 将焦点设置到“name”元素而不是“shortCode”元素

<div class="container">
<div class="layout-box" igxLayout igxLayoutJustify="end">
  <div class="layout-box__el" >
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput #focusShortCode name="shortCode" type="text" [value]="shortCode" />
      <label igxLabel  for="shortCode">{{shortCodePlaceHolder}}</label>
    </igx-input-group>
  </div>
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput name="name" type="text" [value]="name" />
      <label igxLabel for="name">{{namePlaceHolder}}</label>
    </igx-input-group>
  </div>
</div>
<div class="layout-box" igxLayout igxLayoutJustify="end" style="margin-top: -15px;">
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput name="street1" type="text" [value]="street1" />
      <label igxLabel for="street1">{{street1PlaceHolder}}</label>
    </igx-input-group>
  </div>
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
    <input igxInput name="street2" type="text" [value]="street2"/>
      <label igxLabel for="street2">{{street2PlaceHolder}}</label>
    </igx-input-group>
  </div>
</div>

<div class="layout-box" igxLayout igxLayoutJustify="end" style="margin-top: -15px;">
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput name="city" type="text" [value]="city"/>
      <label igxLabel for="city">{{cityPlaceHolder}}</label>
    </igx-input-group>
  </div>
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput name="country" type="text" [value]="county"/>
      <label igxLabel for="country">{{countyPlaceHolder}}</label>
    </igx-input-group>
  </div>
</div>

<div class="layout-box" igxLayout igxLayoutJustify="end" style="margin-top: -15px;">
  <div class="layout-box__el">
    <igx-input-group type="border" style="width: 200px;">
      <input igxInput name="postCode" type="text" [value]="postCode"/>
      <label igxLabel for="postCode">{{postCodePlaceHolder}}</label>
    </igx-input-group>
  </div>
  <div class="layout-box__el">
    <igx-input-group type="border" style="float: right; width: 100px;" >
      <input igxInput name="country" type="text" [value]="country" />
      <label igxLabel for="country">{{countryCodePlaceHolder}}</label>
    </igx-input-group>
  </div>
  <div>
    <button class="igx-button--raised" #buttonElement igxButton (keydown.Tab)="onBlur(true)">Close</button>
  </div>

</div>
</div>

【问题讨论】：

标签： html angular ignite-ui-angular

【解决方案1】：

当覆盖应用于按键、按钮点击等的逻辑时，您需要确保阻止默认行为。由于 keydown 是可取消事件，您可以将事件参数传递给处理程序并使用 event.preventDefault() 取消它。在此之前，可以调用 event.stopPropagation() 方法以防止事件冒泡：

document.getElementById("buttonElement")
        .addEventListener("keydown", (event) => {
            if (event.key === "Tab") {
                //focus the first element
                this.firstElem.focus();
                //stop the default behaviour
                event.stopPropagation();
                event.preventDefault();
            }
        });

这里有一个小示例说明我使用igxInputGroup 和IgxOverlayService 的建议：https://stackblitz.com/edit/cycle-through-elems-in-overlay

【讨论】：