【jQuery】form内でEnterキーを押すと次の要素にフォーカスさせる

ささっと作ってみた。

.js

$('form input, form select').on("keypress", function (e) {
    if (e.key === "Enter") {
        let submit = false;
        let reverse = false;
        let nowinput = this;
        let inputs = $(this).closest('form').find('input:visible:not(input[readonly]), select:visible:not(input[readonly])');
        if (e.shiftKey) {
            reverse = true;
            inputs = $($(inputs).get().reverse());
        }
        inputs.each(function (index, input) {
            if (nowinput == input) {
                if (index < inputs.length - 1) {
                    $(inputs[index + 1]).focus();
                    return false;
                } else {
                    submit = true;
                    return false;
                }
            }
        });
        if (submit && !reverse) {
            return true;
        } else {
            return false;
        }
    }
});

動作としては以下の通り。

• フォーム内でEnterキーを押すと次の要素（input,select）にフォーカス
• 次の要素がなかった場合はそのまま送信
• 非表示またはreadonlyになっているinputはフォーカス対象にならない
• Shiftキーを押しながらEnterキーを押すと逆順にフォーカス

留意点とか

• textareaに対応させてない
• 気が向いたら対応させます
• Ctrl+Enterで一発送信させたいかも
• こちらも気が向けば対応