我试图根据当前具有焦点的元素将焦点移到选项卡序列中的下一个元素。到目前为止，我还没有在我的搜索中找到任何东西。
function OnFocusOut()
{
var currentElement = $get(currentElementId); // ID set by OnFocusIn
currentElementId = "";
currentElement.nextElementByTabIndex.focus();
}
当然 nextElementByTabIndex 是这个工作的关键部分。如何在选项卡序列中找到下一个元素？该解决方案需要基于使用 JScript 而不是类似 JQuery 的东西。
我从来没有实现过这个，但我已经研究过类似的问题，这就是我会尝试的。
首先，我会看看您是否可以简单地为当前具有焦点的元素上的 Tab 键触发一个keypress事件。对于不同的浏览器，可能有不同的方法来执行此操作。
引用 jQuery 实现，您必须：
听 Tab 和 Shift+Tab 可能在网络上的其他地方都有很好的介绍，所以我会跳过那部分。
知道哪些元素可以制表是比较棘手的。基本上，如果一个元素是可聚焦的并且没有tabindex="-1"设置属性，则它是可选项卡的。那么我们必须询问哪些元素是可聚焦的。以下元素是可聚焦的：
input、select、textarea、button和object未禁用的元素。a和area具有href或具有tabindex集合数值的元素。tabindex集合数值的元素。此外，一个元素只有在以下情况下才是可聚焦的：
display: none。visibility是visible。这意味着要visibility设置的最近祖先的值必须为visible。如果没有visibility设置祖先，则计算值为visible。更多细节在另一个Stack Overflow 答案中。
文档中元素的 Tab 键顺序由tabindex属性控制。如果未设置任何值，tabindex则有效0。
tabindex文档的顺序是：1, 2, 3, ..., 0。
最初，当body元素（或没有元素）具有焦点时，Tab 键顺序中的第一个元素是最低的非零元素tabindex。如果多个元素具有相同的元素tabindex，则按文档顺序进行，直到到达具有该元素的最后一个元素tabindex。然后你移动到下一个最低点tabindex，这个过程继续。最后，用零（或空）完成这些元素tabindex。
这是我为此目的构建的东西：
function focusNextElement () {
//add all elements we want to include in our selection
var focussableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
if (document.activeElement && document.activeElement.form) {
var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
function (element) {
//check for visibility while always include the current activeElement
return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
});
var index = focussable.indexOf(document.activeElement);
if(index > -1) {
var nextElement = focussable[index + 1] || focussable[0];
nextElement.focus();
}
}
}
没有 jquery：首先，在您的可选项卡元素上，添加class="tabable"这将使我们稍后选择它们。（不要忘记下面代码中的“.”类选择器前缀）
var lastTabIndex = 10;
function OnFocusOut()
{
var currentElement = $get(currentElementId); // ID set by OnFOcusIn
var curIndex = currentElement.tabIndex; //get current elements tab index
if(curIndex == lastTabIndex) { //if we are on the last tabindex, go back to the beginning
curIndex = 0;
}
var tabbables = document.querySelectorAll(".tabable"); //get all tabable elements
for(var i=0; i<tabbables.length; i++) { //loop through each element
if(tabbables[i].tabIndex == (curIndex+1)) { //check the tabindex to see if it's the element we want
tabbables[i].focus(); //if it's the one we want, focus it and exit the loop
break;
}
}
}
我创建了一个简单的 jQuery 插件，它就是这样做的。它使用 jQuery UI 的 ':tabbable' 选择器来查找下一个 'tabbable' 元素并选择它。
用法示例：
// Simulate tab key when element is clicked
$('.myElement').bind('click', function(event){
$.tabNext();
return false;
});
答案的核心在于找到下一个元素：
function findNextTabStop(el) {
var universe = document.querySelectorAll('input, button, select, textarea, a[href]');
var list = Array.prototype.filter.call(universe, function(item) {return item.tabIndex >= "0"});
var index = list.indexOf(el);
return list[index + 1] || list[0];
}
用法：
var nextEl = findNextTabStop(element);
nextEl.focus();
请注意，我不关心优先级tabIndex。