【jQuery】Enterキーで次の要素へフォーカス移動（hide()対応版）

2018-01-29

フォームで要素間移動をTabキー以外にもEnterキーで移動させたいという要望がよくある。
jQueryで書くと下記のような感じ。

$(function() {
    $('input').on("keydown", function(e) {
        var n = $("input").length;
        if (e.which == 13) {
            e.preventDefault();
            var Index = $('input').index(this);
            var nextIndex = $('input').index(this) + 1;
            if (nextIndex < n) {
                $('input')[nextIndex].focus();   // 次の要素へフォーカスを移動
            } else {
                $('input')[Index].blur();        // 最後の要素ではフォーカスを外す
            }
        }
    });
});

 
しかし、最後の要素にあたる部分が

    $("#hogehoge").hide();

等で非表示にしたり表示したりという制御を行っている場合、表示されている要素が最後とは限らなくなり条件から外れてしまうことがある。
よって、表示されている最後の要素ではEnterキーでフォーカスが外れないことになる。

そこで、その非表示されている要素の前要素が特定できる場合、その特定要素のindexを取得して判定し、フォーカスを外す処理をすればよい。

$(function() {
    $('input').on("keydown", function(e) {
        var n = $("input").length;
        if (e.which == 13) {
            e.preventDefault();
            var Index = $('input').index(this);            // 現在の要素
            var nextIndex = $('input').index(this) + 1;    // 次の要素
            var hogeIindex = $('input').index($("#hoge")); // 特定要素
            if (Index === hogeIndex) {
                $('input')[Index].blur();         // #hogeではフォーカスを外す
            } else if (nextIndex < n) {
                $('input')[nextIndex].focus();    // 次の要素へフォーカスを移動
            } else {
                $('input')[Index].blur();         // 最後の要素ではフォーカスを外す
            }
        }
    });
});