我需要在扩展的覆盖控件中循环。展开叠加层后,我想循环输入元素,直到叠加层折叠起来。我的代码工作到一定程度,即一旦覆盖可见,我的焦点就会设置到第一个输入元素并向下循环到最后一个“按钮”元素。
我的问题是我添加的代码无法按预期工作,以便我可以围绕展开的叠加层循环。
此代码片段最初将焦点设置到第一个输入元素
@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.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
关于html - 在 Angular 组件中通过 nativeElement.focus() 控制 Tab 键顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63879900/