如何解决在Angular中使用ngIf删除当前焦点的元素时,如何将焦点重置为页面顶部?
我正在努力改善Angular应用程序的可访问性。有一个取消按钮,如果按下该按钮将隐藏该按钮并显示带有警告的div和两个按钮(是和否)。如果按no,则警告消失,并且取消按钮再次出现。
我将在下面添加一个小的示例代码片段。实际的代码有点复杂。
<button *ngIf="!hideCancel" (click)="toggleWarning(true)" </button>
<div *ngIf="hideCancel">
<p>Are you sure you want to cancel?</p>
<button> Yes </button>
<button (click)="toggleWarning(false)"> No </button>
</div>
toggleWarning(flag: boolean) {
if (flag) {
document.getElementById('someWarning').innerHTML = 'Are you sure you want to cancel?';
} else {
document.getElementById('someWarning').innerHTML = '';
}
this.hideCancel= !this.hideCancel;
}
在使用Tab键并将焦点放在“取消”按钮上时,当用户按Enter键时,“取消”按钮消失,并显示以下警告。然后,当我按Tab键时,Chrome / Firefox会按预期将焦点移到警告下方的“否”按钮。但是在IE中,焦点放在页面顶部。
我不知道为什么会这样。是否是因为当前关注的元素(取消按钮)已从DOM中删除,因此焦点已重设到制表符的顶部? 请提供有关如何在Internet Explorer中防止这种情况的帮助。
解决方法
有一种解决方法,可以将选项卡焦点保留在下一个元素上。
<button *ngIf="!hideCancel" (click)="toggleWarning(true);yesBtn.focus()">Cancel </button>
<!-- see how yesBtn reference is used to set the focus-->
<div *ngIf="hideCancel">
<p>Are you sure you want to cancel?</p>
<button #yesBtn> Yes </button>
<button (click)="toggleWarning(false)"> No </button>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。