Enterでカーソル移動

２０年以上、システム開発の仕事をしていますが、20年間お客様の要望で変わらないのが「Enterキーでカーソル移動をしたい」というもの。
WindowsはTabキーでの移動が標準なのでそちらで何とかしてくださいとは思うのですが、
できることなら何とかしたいという気持ちもあります。

Windowsアプリを作る場合はコントロールごとにTabインデックスを設定してEnterキーが押されたらTabインデックス順に移動させる。
あるいはEnterキーが押された場合にTabキーが押されたことに変換をして移動させていくような手法を取りますが、細かい部分をいろいろ考慮せねばならず、
雑な私にはそこそこ大変な作業でありました。

今はWebアプリの開発が多くなりましたが、やはり「Enterキーでカーソル移動をしたい」というご要望をいただくことがあります。
HTML内でEnterキーを使ってカーソル移動する場合は、今、カーソルのある要素のHTML内での順番を確認し、次の要素にカーソルを位置付けるという動きになりますが
HTMLですとinput type="hidden"やらスタイルでdisplay:noneやら、いろいろな書き方ができるのでそれらをスキップしてやる必要があります。

コードで書くとこのような感じ

 $(function() {

    $('input,select,a,button,submit').bind("keydown", function(e) {
        var n = $("input,select,a,button,submit").length;
        //13=enterキー
        if (e.which == 13)
        {

            e.preventDefault();
            var nextIndex = $('input,select,a,button,submit').index(this) + 1;

            i=0;
            while (true) {

                if ($('input,select,a,button,submit')[nextIndex].id != ''
                   && $('input,select,a,button,submit')[nextIndex].style.display != 'none'
                   && $('input,select,a,button,submit')[nextIndex].parentElement.style.display != 'none'
                   && $('input,select,a,button,submit')[nextIndex].parentElement.parentElement.style.display != 'none'
                   && $('input,select,a,button,submit')[nextIndex].parentElement.parentElement.parentElement.style.display != 'none'
                   && $('input,select,a,button,submit')[nextIndex].parentElement.parentElement.parentElement.parentElement.style.display != 'none'
                   && $('input,select,a,button,submit')[nextIndex].type != 'hidden') {
                   break;
                }

                nextIndex++;
                if(nextIndex >= n) {
                    nextIndex=1;
                }
           }

           //focusをセットする
           $('input,select,a,button,submit')[nextIndex].focus();

        }
 
    });

});

input、select、a、button、submitのタグ要素を取得し、現在の要素の番号を取得して次の要素に移動するのですが、
次の要素がinput type="hidden"の場合や、スタイルでdisplay:noneを指定されている場合はスキップしてさらに
次の要素が表示されている項目かをチェックします。これを繰り返し、表示されている項目であればフォーカスをセットします。

また、入力要素をかこっているDivタグなどにdisplay:noneが設定されている場合も非表示項目になるのでフォーカスセットしないようにチェックしています。

課題も残っていて入力要素をかこっている要素のdisplay:noneのチェックは4階層上までしかチェックできていないことと、その書き方がかっこ悪いこと。
単純にHTMLベースでチェックしているのでダイアログ要素やタブ要素に対応できていないこと。これらについて改良中です。いずれここで完成したものを紹介できればと思います。