如何使用tab键将焦点移动到另一个元素

Question

我遇到了一个问题。我有一个模态窗口关闭，取消和提交按钮。例如，当我单击关闭按钮并尝试使用tab键获取下一个元素时，焦点立即切换到页脚，而不是下一个元素。我需要在按下关闭，提交或取消按钮后进行聚焦转到下一项(打开计算器)

modal

代码

<div id="special-needs-consent-form" class="modal" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header" aria-label="@SpecialNeeds.ConsentForm">
<h3 class="modal-title">@SpecialNeeds.ConsentForm</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="@Buttons.Close" onclick="removeCheckedSpecialNeeds()"><span aria-hidden="true"><em class="zmdi zmdi-close"></em></span></button>
</div>

<div class="modal-body">
<div>

<div class="modal-footer" aria-label="@Everything.ConsentFooter">
<button type="button" class="btn btn-primary btn-raised" data-dismiss="modal" onclick="removeCheckedSpecialNeeds()">@Buttons.Cancel</button>
<button id="consent-submit-btn" type="button" class="btn btn-primary btn-raised">@Buttons.Submit</button>
</div>

单击关闭提交或取消按钮后要关注的元素的代码

<div class="radio-primary col-lg-12">
@if (RBBConfiguration.CurrentConfig.EnableFeeSubsidyExternalUrl)
{
<a class="button" target="_blank" href="@(Model.FeeSubsidyExternalLink)" tabindex="0">@Model.FeeSubsidyExternalLinkText</a>
}
else
{
<a data-toggle="collapse" data-target=".subsidy-calculator:not(.show)" id="feeCalculator" class=" ml-4" tabindex="0">@Everything.OpenFeeCalculator</a>
}
</div>

我尝试使用tabindex =(1,2,3等)元素，但它不能正常工作

Answer 1

使用一个简单的onkeydown方法:

let counter = 0;
document.body.onkeydown = (ev) => {
ev.preventDefault()
if (ev.key == "Tab") {
if (counter % 2 == 0) {
//focus on input
document.querySelector("#key").focus();
document.querySelector("p").style.color = "";
} else {
//"focus" on paragraph
document.querySelector("#key").blur();
document.querySelector("p").style.color = "red";
}
counter++;
}
}

<input id="key">
<p>hello</p>

点击窗口，点击标签

我建议研究这个表:输入图片描述