当落在焦点陷阱的最后一个元素上时，它会立即返回到第一个元素

Question

我遇到了焦点补漏的问题，我有一个弹出窗口，其中有一个命令栏，有3个使用图标的span元素，当我在它们之间切换时，它工作得很好，直到我切换到最后一个元素，一到它上，它就会让我回到第一个元素，我所期望的是，当我离开最后一个元素时，它应该回到第一个元素。。点击保存图标并使用标签键

const element = document.getElementById("PromptsDialog");
const focusableElements = element.querySelectorAll("span:not([disabled])");
const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];
element.addEventListener("keyup", function(e) {
if (e.key === "Tab") {
if (document.activeElement === lastFocusableElement) {
firstFocusableElement.focus();
e.preventDefault();
}
}
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PromptsDialog" style="display: block;">
<div class="prompt-title-bar">
<h4 style="margin-top:-4px;">Options Prompt</h4>
<div id="PromptsCommand" class="">
<div style="height:inherit">
<span type="" tabindex="1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save" class="" id="btnSaveWindow"><i class="fa fa-save"></i></span>
<span type="" tabindex="2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Remove Item" class="" id="btnRemoveFromItemsGrid"><i class="fa fa-trash"></i></span>
<span type="" tabindex="3" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close" class="" id="btnClosePromptDialog"><i class="fa fa-remove"></i></span>
</div>
</div>
</div>
</div>

你知道为什么当我降落在最后一个元素上时会发生这种情况吗？

谢谢！

Answer 1

由于事件的时间安排，它或多或少会立即返回到第一个元素。在代码中，您使用的是">keyup"事件，该事件在释放"Tab"键后立即触发。然而，当按下(向下("Tab"键时，最后一个元素会被聚焦，因此按下Tab键将首先聚焦最后一个元件，然后在释放Tab键时执行代码，立即移回第一个元件。

一个简单的解决方法是使用">keydown"事件。

const element = document.getElementById("PromptsDialog");
const focusableElements = element.querySelectorAll("span:not([disabled])");
const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];
element.addEventListener("keydown", function(e) {
if (e.key === "Tab") {
if (document.activeElement === lastFocusableElement) {
firstFocusableElement.focus();
e.preventDefault();
}
}
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PromptsDialog" style="display: block;">
<div class="prompt-title-bar">
<h4 style="margin-top:-4px;">Options Prompt</h4>
<div id="PromptsCommand" class="">
<div style="height:inherit">
<span type="" tabindex="1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save" class="" id="btnSaveWindow"><i class="fa fa-save"></i></span>
<span type="" tabindex="2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Remove Item" class="" id="btnRemoveFromItemsGrid"><i class="fa fa-trash"></i></span>
<span type="" tabindex="3" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close" class="" id="btnClosePromptDialog"><i class="fa fa-remove"></i></span>
</div>
</div>
</div>
</div>

Answer 2

Keydown是一个更好的事件，它也适用于移位选项卡

const element = document.getElementById("PromptsDialog");
const focusableElements = element.querySelectorAll("span:not([disabled])");
const lastIdx = focusableElements.length-1;
focusableElements.forEach((elem, i) => {
elem.dataset.next = i < lastIdx ? i+1 : 0;
elem.dataset.prev = i >= 1 ? i-1 : lastIdx;
})
element.addEventListener("keydown", function(e) { 
if (e.key === "Tab") {
e.preventDefault();
const idx = +e.target.dataset[e.shiftKey ? "prev" : "next"];
focusableElements[idx].focus();
}
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PromptsDialog" style="display: block;">
<div class="prompt-title-bar">
<h4 style="margin-top:-4px;">Options Prompt</h4>
<div id="PromptsCommand" class="">
<div style="height:inherit">
<span type="" tabindex="1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save" class="" id="btnSaveWindow"><i class="fa fa-save"></i></span>
<span type="" tabindex="2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Remove Item" class="" id="btnRemoveFromItemsGrid"><i class="fa fa-trash"></i></span>
<span type="" tabindex="3" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close" class="" id="btnClosePromptDialog"><i class="fa fa-remove"></i></span>
</div>
</div>
</div>
</div>