[解決済み] タブインデックスで次の要素にフォーカスする

質問

私は、フォーカスを持つ現在の要素に基づいて、タブシーケンス内の次の要素にフォーカスを移動させようとしています。これまでのところ、私は検索で何も見つけられませんでした。

function OnFocusOut()
{
    var currentElement = $get(currentElementId); // ID set by OnFocusIn 

    currentElementId = "";
    currentElement.nextElementByTabIndex.focus();
}

もちろん、nextElementByTabIndexは、これが動作するための重要な部分です。タブシーケンスで次の要素を見つけるにはどうすればよいのでしょうか？解決策は、JQueryのようなものでなく、JScriptを使用する必要があります。

どのように解決するのですか？

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;
        }
    }
}