通过Angular组件中的nativeElement.focus控制标签顺序

编程问答 2022-07-06

问题描述

我需要循环浏览一个扩展的叠加控件。覆盖层展开后，我想循环浏览输入元素，直到覆盖层折叠为止。我已经将代码工作到了一定程度，即，当覆盖层可见时，我的焦点便设置为第一个输入元素，并循环到最后一个“按钮”元素。

我的问题是，我添加的代码无法循环显示扩展的叠加层，因此无法正常工作。

此代码段最初将焦点设置在第一个输入元素上

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

该代码段应该将焦点再次设置为第一个输入元素

 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>

解决方法

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

df$y <- ""
df$y[df$x == 2] <- "hello"
df$y[df$x == 3] <- "world"

此处提供了一个使用igxInputGroup和IgxOverlayService来说明我的建议的小样本：https://stackblitz.com/edit/cycle-through-elems-in-overlay

angularangularhtmlignite-ui-angular