要实现按下"Tab"键时忽略隐藏区域中的"A"和按钮元素,可以使用以下代码示例:
HTML:
JavaScript:
document.addEventListener("keydown", function(event) {
if (event.code === "Tab") {
var hiddenArea = document.getElementById("hidden-area");
var focusableElements = hiddenArea.querySelectorAll("a, button");
var inputField = document.getElementById("input-field");
var currentFocus = document.activeElement;
if (hiddenArea.contains(currentFocus)) {
var nextIndex = Array.prototype.indexOf.call(focusableElements, currentFocus) + 1;
if (nextIndex >= focusableElements.length) {
nextIndex = 0;
}
event.preventDefault();
focusableElements[nextIndex].focus();
} else if (currentFocus === inputField) {
event.preventDefault();
focusableElements[0].focus();
}
}
});
在上面的代码中,我们首先通过getElementById
方法获取隐藏区域的元素和输入框元素。然后,我们使用querySelectorAll
方法选择隐藏区域中的"A"和按钮元素。接下来,我们检查当前焦点元素是否在隐藏区域中。如果是,则找到当前焦点元素在可聚焦元素数组中的索引,并将焦点设置为下一个可聚焦元素。如果下一个焦点元素是隐藏区域中的最后一个元素,则将焦点设置为可聚焦元素数组中的第一个元素。如果当前焦点元素是输入框元素,则将焦点设置为隐藏区域中的第一个可聚焦元素。最后,我们使用event.preventDefault()
方法阻止默认的"Tab"键行为,以确保焦点不会落在隐藏区域的元素上。